/*
 * CRY-EX design tokens (from the brand kit). Tokens only: colour, type,
 * shape, spacing, depth, motion, layers and the per-app accent.
 * Shared components live in /shared/cryex-shell.css; each app's own rules
 * live in its own styles.css.
 *
 * Light is the default; dark follows prefers-color-scheme unless the page sets
 * <html data-theme="light|dark">. The apps pin data-theme="light" until their
 * own sheets support dark. The shell (top bar, footer, dark bands) stays dark
 * in both modes - that is the brand frame.
 * Per-app accent: <body data-cryex-app="customer|driver|merchant|admin|advertising">.
 */

/*
 * Brand fonts, self-hosted (SIL OFL 1.1, licences in /shared/fonts/):
 * Inter for UI text, Manrope for headings. One variable file per family and
 * subset covers every weight; latin-ext carries the peso sign (U+20B1).
 * Pages preload /shared/fonts/inter-latin-wght-normal.woff2.
 */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shared/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/shared/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/shared/fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/shared/fonts/manrope-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  color-scheme: light;

  /* Brand constants (same in both modes) */
  --cx-brand-ink: #0b1220;          /* "Night" - mark tile, shell, wordmark */
  --cx-brand-signal: #c5f23a;       /* "Signal" lime - hi-vis accent */

  /* Shell: always dark */
  --cx-bg: #0b1220;
  --cx-bg-soft: #0f1729;
  --cx-panel: #121b2e;
  --cx-panel-strong: #18233a;
  --cx-panel-soft: #141e33;
  --cx-line: rgba(255, 255, 255, 0.09);
  --cx-line-strong: rgba(255, 255, 255, 0.17);
  --cx-text: #f3f5f8;
  --cx-muted: #a3adbd;
  --cx-faint: #8a95a8;

  /* Accent (works on the dark shell and as a filled button with dark text) */
  --cx-accent: #c5f23a;
  --cx-accent-strong: #a9d61c;      /* hover / gradient end */
  --cx-accent-soft: rgba(197, 242, 58, 0.14);
  --cx-on-accent: #0b1220;          /* text on any accent fill, both modes */

  /* App accents used outside their app (landing role cards) */
  --cx-driver-accent: #5ee6c8;
  --cx-merchant-accent: #ff9a76;

  /* Content surfaces: light mode */
  --cx-canvas: #f4f6f8;
  --cx-surface: #ffffff;
  --cx-surface-muted: #e9edf2;
  --cx-border: #d5dbe3;
  --cx-ink: #0b1220;
  --cx-ink-muted: #4a5568;
  --cx-ink-faint: #667085;
  --cx-accent-ink: #4a7a00;         /* accent used as text/links on surfaces */

  /* Status */
  --cx-success: #17784a;
  --cx-success-soft: #dcf5e7;
  --cx-info: #2456c9;
  --cx-info-soft: #e1eafd;
  --cx-warning: #a14e05;
  --cx-warning-soft: #fdf0d9;
  --cx-danger: #b42318;
  --cx-danger-soft: #fde5e3;

  /* Focus: dark outline + signal halo reads on light, dark and lime */
  --cx-focus: #0b1220;
  --cx-focus-halo: #c5f23a;
  --cx-focus-ring: 0 0 0 3px var(--cx-focus), 0 0 0 6px var(--cx-focus-halo);

  /* Type */
  --cx-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cx-font-display: Manrope, Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --cx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --cx-text-xs: 12px;
  --cx-text-sm: 14px;
  --cx-text-md: 16px;
  --cx-text-lg: 18px;
  --cx-text-xl: 22px;
  --cx-text-2xl: 28px;
  --cx-text-3xl: clamp(2rem, 4vw, 2.75rem);
  --cx-weight-regular: 400;
  --cx-weight-medium: 560;
  --cx-weight-bold: 720;
  --cx-weight-heavy: 820;
  --cx-tracking-tight: -0.02em;
  --cx-tracking-caps: 0.12em;
  --cx-leading: 1.5;
  --cx-leading-tight: 1.15;

  /* Shape */
  --cx-radius-sm: 6px;
  --cx-radius: 8px;
  --cx-radius-lg: 12px;
  --cx-radius-dialog: 16px;
  --cx-radius-pill: 999px;

  /* Spacing (4px base) */
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-space-7: 48px;
  --cx-space-8: 64px;

  /* Depth */
  --cx-shadow: 0 24px 72px rgba(5, 10, 20, 0.32);
  --cx-shadow-soft: 0 12px 36px rgba(11, 18, 32, 0.08);
  --cx-shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.08);

  /* Motion */
  --cx-duration-fast: 150ms;
  --cx-duration: 200ms;
  --cx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layout */
  --cx-header: 64px;                /* desktop workbar height */
  --cx-mobile-nav: 72px;            /* fixed mobile tab bar, without safe area */

  /* Layers */
  --cx-z-base: 0;
  --cx-z-sticky: 20;
  --cx-z-menu: 30;
  --cx-z-scrim: 40;
  --cx-z-overlay: 50;
  --cx-z-toast: 70;
}

/* Dark content surfaces. Same values twice: system preference and explicit override.
   The dark sign-in and verification dialogs always use them, so status and
   form tokens read on their dark panel in light mode too. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cx-canvas: #0d1424;
    --cx-surface: #141d30;
    --cx-surface-muted: #1b2539;
    --cx-border: #2a3550;
    --cx-ink: #eef2f7;
    --cx-ink-muted: #a9b4c4;
    --cx-ink-faint: #8a95a8;
    --cx-accent-ink: #c5f23a;
    --cx-success: #4ade80;
    --cx-success-soft: #10291e;
    --cx-info: #93b4ff;
    --cx-info-soft: #16233f;
    --cx-warning: #fbbf24;
    --cx-warning-soft: #2c2110;
    --cx-danger: #ff8a80;
    --cx-danger-soft: #331618;
    --cx-focus: #eef2f7;
    --cx-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.36);
    --cx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"],
.pv-auth-dialog,
.prs-verification-dialog,
.admin-bootstrap-dialog {
  color-scheme: dark;
  --cx-canvas: #0d1424;
  --cx-surface: #141d30;
  --cx-surface-muted: #1b2539;
  --cx-border: #2a3550;
  --cx-ink: #eef2f7;
  --cx-ink-muted: #a9b4c4;
  --cx-ink-faint: #8a95a8;
  --cx-accent-ink: #c5f23a;
  --cx-success: #4ade80;
  --cx-success-soft: #10291e;
  --cx-info: #93b4ff;
  --cx-info-soft: #16233f;
  --cx-warning: #fbbf24;
  --cx-warning-soft: #2c2110;
  --cx-danger: #ff8a80;
  --cx-danger-soft: #331618;
  --cx-focus: #eef2f7;
  --cx-shadow-soft: 0 12px 36px rgba(0, 0, 0, 0.36);
  --cx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Per-app accent. --cx-app-accent is for the dark shell (active nav, icons,
   badges, filled chips with --cx-on-accent text). --cx-app-accent-ink is the
   same hue dark enough for text on light surfaces. Brand lime stays the
   primary-button colour in every app; the app accent only tints wayfinding. */
body[data-cryex-app] {
  --cx-app-accent: var(--cx-accent);
  --cx-app-accent-ink: var(--cx-accent-ink);
  --cx-app-accent-soft: var(--cx-accent-soft);
}

body[data-cryex-app="customer"] {
  --cx-app-accent: #c5f23a;
  --cx-app-accent-ink: #4a7a00;
  --cx-app-accent-soft: rgba(197, 242, 58, 0.14);
}

body[data-cryex-app="driver"] {
  --cx-app-accent: var(--cx-driver-accent);
  --cx-app-accent-ink: #0b7560;
  --cx-app-accent-soft: rgba(94, 230, 200, 0.14);
}

body[data-cryex-app="merchant"] {
  --cx-app-accent: var(--cx-merchant-accent);
  --cx-app-accent-ink: #b5401a;
  --cx-app-accent-soft: rgba(255, 154, 118, 0.14);
}

body[data-cryex-app="admin"] {
  --cx-app-accent: #a8b9ff;
  --cx-app-accent-ink: #3949c4;
  --cx-app-accent-soft: rgba(168, 185, 255, 0.14);
}

body[data-cryex-app="advertising"] {
  --cx-app-accent: #ffc94d;
  --cx-app-accent-ink: #8a5a00;
  --cx-app-accent-soft: rgba(255, 201, 77, 0.14);
}

/* In dark mode the -ink accents sit on dark surfaces, so use the light hue. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-cryex-app] {
    --cx-app-accent-ink: var(--cx-app-accent);
  }
}

:root[data-theme="dark"] body[data-cryex-app] {
  --cx-app-accent-ink: var(--cx-app-accent);
}