/* ============================================================================
   GetHired — design tokens
   ----------------------------------------------------------------------------
   Colors are lifted verbatim from the product, not invented:
     gethired-app/src/theme/index.js   role palettes + semantic colors
     gethired-admin/src/index.css      neutral ramp + shadows
     gethired-app/app.json             launch (splash / adaptive icon) blues

   Two identities coexist in the product and both are honoured here:
     - in-app  : customer = green, worker = indigo, admin = teal
     - launch  : royal blue (icon + splash artwork only)

   The page is dark-canvas by default. Light theme is a full token swap; nothing
   below this file ever hard-codes a color.
   ========================================================================== */

:root {
  /* -------------------------------------------------- role accents (fixed) */
  /* customer / "hire" side — colors.primary when role = customer */
  --hire: #18a957;
  --hire-lt: #2bc46f;
  --hire-dk: #128243;
  --hire-soft: #e4f5ea;

  /* worker / "earn" side — PALETTES.worker */
  --earn: #6d5df3;
  --earn-lt: #7c6cff;
  --earn-dk: #5747e0;
  --earn-soft: #ece9fe;

  /* admin console — PALETTES.admin */
  --admin: #0d9488;
  --admin-lt: #14b8a6;

  /* money actions only (Book / Pay / fees / payouts) — colors.accent */
  --money: #f97316;
  --money-lt: #fb923c;
  --money-soft: #ffedd5;

  /* launch identity — used only beside the real icon + splash artwork */
  --brand-blue: #0240b5;
  --brand-blue-lt: #2a8cfb;

  /* status — colors.success / warning / danger */
  --ok: #16a34a;
  --warn: #f59e0b;
  --bad: #dc2626;

  /* ------------------------------------------- the shifting page accent
     scroll-scenes.js retargets these three as the story moves between the
     hire (green) and earn (indigo) halves, so every accent on the page —
     buttons, rules, glows, gauges — turns together. */
  --accent: var(--hire);
  --accent-lt: var(--hire-lt);
  --accent-rgb: 24 169 87;

  /* --------------------------------------------------- dark canvas (default) */
  --bg: #070b0a;
  --bg-deep: #040706;
  --surface: #0e1512;
  --surface-2: #16211c;
  --surface-3: #1c2a24;

  --ink: #eaf1ec;
  --ink-soft: #9db0a6;
  --ink-faint: #6b7f87;

  --line: #1e2c31;
  --line-2: #2c3f46;

  /* translucent fills — glass panels, sticky nav */
  --glass: rgb(255 255 255 / 0.04);
  --glass-2: rgb(255 255 255 / 0.07);
  --glass-line: rgb(255 255 255 / 0.09);
  --scrim: rgb(4 7 6 / 0.72);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px -12px rgb(0 0 0 / 0.7);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.4), 0 32px 64px -24px rgb(0 0 0 / 0.85);
  --shadow-accent: 0 24px 64px -28px rgb(var(--accent-rgb) / 0.75);

  /* device chrome — the phone mockups */
  --device-shell: #05100c;
  --device-edge: #263630;
  --device-screen: #f7faf4; /* colors.surface (customer) */

  color-scheme: dark;

  /* --------------------------------------------------------------- radii */
  /* radius.md = 14 · radius.lg = 16 · radius.pill = 999 (app tokens) */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ------------------------------------------------------------ typography */
  --font-sans: 'Poppins', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'SF Mono', monospace;

  /* fluid scale — the app's 24px display is right for a 390px phone and far
     too small for a 2560px hero, so the web scale is its own thing. */
  /* The hero headline is authored as two lines and must stay two lines: sized
     so "Find trusted workers" fits the copy column at every width. */
  --fs-mega: clamp(2.6rem, 1.1rem + 4.4vw, 4.4rem);
  --fs-display: clamp(2.4rem, 1.25rem + 4.9vw, 5.25rem);
  --fs-h2: clamp(1.9rem, 1.15rem + 3.1vw, 3.5rem);
  --fs-h3: clamp(1.35rem, 1.05rem + 1.25vw, 1.9rem);
  --fs-h4: clamp(1.05rem, 0.97rem + 0.4vw, 1.25rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem);
  --fs-body: clamp(0.95rem, 0.91rem + 0.2vw, 1.05rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 0.98;
  --lh-snug: 1.14;
  --lh-body: 1.62;

  --tracking-tight: -0.035em;
  --tracking-eyebrow: 0.2em;

  /* ---------------------------------------------------------- layout rhythm */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem);
  --maxw: 1240px;
  --maxw-prose: 62ch;
  /* vw-based so the rhythm scales, but capped — on an ultrawide monitor an
     uncapped value turns every gap into half a screen of nothing. */
  --section-y: clamp(6rem, 3rem + 11vw, 12rem);
}

/* Ultrawide: the 1240px cap leaves the hero and every two-column scene marooned
   in the middle of the screen. Widen the container rather than scaling type. */
@media (min-width: 1700px) {
  :root {
    --maxw: 1440px;
  }

  /* ------------------------------------------------------------ motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 180ms;
  --dur: 340ms;
  --dur-slow: 720ms;

  /* Set to 0 by base.css under prefers-reduced-motion, so any transition that
     multiplies by it collapses to instant without needing its own override. */
  --motion: 1;
}

/* ------------------------------------------------------------------ light */
/* Applied when the visitor explicitly picks light, or when they have no stored
   preference and their OS is light. The [data-theme="dark"] guard is what lets
   the toggle win over the OS in both directions. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #fbfcfa;
    --bg-deep: #f1f5f2;
    --surface: #ffffff;
    --surface-2: #f5f8f4;
    --surface-3: #eaf0ea;

    --ink: #101828; /* colors.text */
    --ink-soft: #667085; /* colors.muted */
    --ink-faint: #98a2b3;

    --line: #e7eaee; /* colors.border */
    --line-2: #cfd6dd;

    --glass: rgb(16 24 40 / 0.03);
    --glass-2: rgb(16 24 40 / 0.05);
    --glass-line: rgb(16 24 40 / 0.08);
    --scrim: rgb(255 255 255 / 0.76);

    --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
    --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.15);
    --shadow-lg: 0 2px 4px rgb(16 24 40 / 0.06), 0 32px 64px -24px rgb(16 24 40 / 0.28);

    --device-shell: #0f172a;
    --device-edge: #cfd6dd;

    color-scheme: light;
  }
}

:root[data-theme='light'] {
  --bg: #fbfcfa;
  --bg-deep: #f1f5f2;
  --surface: #ffffff;
  --surface-2: #f5f8f4;
  --surface-3: #eaf0ea;

  --ink: #101828;
  --ink-soft: #667085;
  --ink-faint: #98a2b3;

  --line: #e7eaee;
  --line-2: #cfd6dd;

  --glass: rgb(16 24 40 / 0.03);
  --glass-2: rgb(16 24 40 / 0.05);
  --glass-line: rgb(16 24 40 / 0.08);
  --scrim: rgb(255 255 255 / 0.76);

  --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.05);
  --shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 8px 24px -12px rgb(16 24 40 / 0.15);
  --shadow-lg: 0 2px 4px rgb(16 24 40 / 0.06), 0 32px 64px -24px rgb(16 24 40 / 0.28);

  --device-shell: #0f172a;
  --device-edge: #cfd6dd;

  color-scheme: light;
}

/* Sections declare which half of the marketplace they belong to; the accent
   trio follows. scroll-scenes.js animates the same variables on :root for the
   smooth cross-fade between scenes. */
[data-side='hire'] {
  --accent: var(--hire);
  --accent-lt: var(--hire-lt);
  --accent-rgb: 24 169 87;
}

[data-side='earn'] {
  --accent: var(--earn);
  --accent-lt: var(--earn-lt);
  --accent-rgb: 109 93 243;
}

[data-side='money'] {
  --accent: var(--money);
  --accent-lt: var(--money-lt);
  --accent-rgb: 249 115 22;
}

[data-side='admin'] {
  --accent: var(--admin);
  --accent-lt: var(--admin-lt);
  --accent-rgb: 13 148 136;
}