/* Vicetok web, Night Shift (D1). Design tokens.
   The car radio at 1am: cream on navy, small tracked titles, numerals carry the size.
   Colours are the Last Light brand set (hex first, OKLCH override where supported). */

:root {
  /* ---------- Last Light brand colours ---------- */
  --midnight:   #070810;   /* dead air: footer band, badge ground, deepest stage */
  --harbor:     #0c0d1b;   /* the reading page at 1am (60%) */
  --causeway:   #20234c;   /* card base, mixed into harbor for --dashboard */
  --overpass:   #2c3868;   /* rules and card edges (via --static) */
  --plum-hour:  #4b2f54;   /* highlight behind key numbers in answers */
  --neon-cream: #fff9cb;   /* body text and titles, 17.6:1 on harbor */
  --haze:       #e5ddff;   /* secondary reading text (ledes, FAQ answers) */
  --lilac:      #ccc2f5;   /* meta: dates, crumbs, dial ticks, 11.6:1 */
  --surf:       #b8f0ea;   /* links and focus rings */
  --flamingo:   #ffb2c7;   /* best answer, step numerals, call sign. Under 5% of a page */

  /* dusk: three stops, LINES ONLY (needle, horizon, best-answer edge, clip progress, wordmark dash) */
  --sea-dusk:   #5a6fe0;
  --motel-neon: #d1499b;
  --last-light: #ff9a52;

  /* ---------- Night Shift roles ---------- */
  --dashboard: color-mix(in oklch, var(--harbor), var(--causeway) 32%);   /* answer / question / feature card */
  --static:    color-mix(in oklch, var(--overpass), transparent 45%);     /* 1px rules, card edges */
  --glovebox:  color-mix(in oklch, var(--harbor), transparent 42%);       /* glass fill, floating layer only */
  --signal:    color-mix(in oklch, var(--lilac), transparent 30%);        /* quiet meta: footer legal, current crumb */
  --static-tick: color-mix(in oklch, var(--lilac), transparent 60%);      /* tuner tick marks */
  --glass-edge: color-mix(in oklch, var(--neon-cream), transparent 80%);
  --glass-shine: color-mix(in oklch, var(--neon-cream), transparent 70%);
  --mark: color-mix(in oklch, var(--plum-hour), transparent 35%);         /* <strong> highlight in answers */
  --rule-dashed: color-mix(in oklch, var(--lilac), transparent 55%);      /* inline app slot outline */

  --dusk-x: linear-gradient(90deg in oklch, var(--sea-dusk), var(--motel-neon) 55%, var(--last-light));
  --dusk-y: linear-gradient(180deg in oklch, var(--sea-dusk), var(--motel-neon) 55%, var(--last-light));

  /* ---------- type families ---------- */
  --text: 'Jost', 'Futura', 'Trebuchet MS', sans-serif;               /* 400 body, 500 UI, 600 caps titles */
  --dial: 'Big Shoulders Display', 'Jost', sans-serif;               /* 700 only: numerals, kickers, call signs */
  --apple: -apple-system, 'SF Pro Text', system-ui, sans-serif;      /* App Store badge placeholder only */
  --caps-track: .16em;                                               /* every Jost caps title */
  --caps-track-tight: .14em;                                         /* caps titles under 22px on phones */

  /* ---------- fluid type scale (360 -> 1440) ---------- */
  /* Jost */
  --t-label:   clamp(.75rem, .7292rem + .0926vw, .8125rem);        /* 12-13 caps labels, qbar, flags */
  --t-meta:    clamp(.875rem, .8542rem + .0926vw, .9375rem);       /* 14-15 dates, crumbs, a-foot */
  --t-ui:      1rem;                                               /* 16 nav, capsule, buttons */
  --t-body:    clamp(1.1875rem, 1.1667rem + .0926vw, 1.25rem);     /* 19-20 reading text, never below 19 */
  --t-lede:    clamp(1.1875rem, 1.125rem + .2778vw, 1.375rem);     /* 19-22 one-sentence section lede */
  --t-row:     clamp(1.0625rem, 1.0208rem + .1852vw, 1.1875rem);   /* 17-19 forum rows, FAQ questions */
  --t-clip:    clamp(1.375rem, 1.2083rem + .7407vw, 1.875rem);     /* 22-30 clip title, Jost 500 */
  --t-section: clamp(1.375rem, 1.1667rem + .9259vw, 2rem);         /* 22-32 section h2, caps 600 */
  --t-thread:  clamp(1.3125rem, 1.1667rem + .6481vw, 1.75rem);     /* 21-28 thread h1, caps 600 */
  --t-hero:    clamp(1.75rem, 1.4167rem + 1.4815vw, 2.75rem);      /* 28-44 hero h1, caps 600 */
  /* Big Shoulders Display 700 */
  --t-tick:    clamp(.9375rem, .8958rem + .1852vw, 1.0625rem);     /* 15-17 dial numerals, call signs */
  --t-kicker:  clamp(1.125rem, 1.0417rem + .3704vw, 1.375rem);     /* 18-22 section kicker "92.3 POST" */
  --t-votes:   clamp(1.75rem, 1.6667rem + .3704vw, 2rem);          /* 28-32 vote and answer counts */
  --t-freq:    clamp(4rem, 3.3333rem + 2.963vw, 6rem);             /* 64-96 frequency readout */
  --t-step:    clamp(4.5rem, 3.5rem + 4.444vw, 7.5rem);            /* 72-120 step numerals 1 2 3 */

  --lh-body: 1.6;      /* 1.62 desktop via .read */
  --lh-title: 1.3;
  --measure: 64ch;

  /* ---------- spacing: non-uniform rhythm ---------- */
  --s-hair: 2px;
  --s-tick: 6px;
  --s-1: 10px;
  --s-2: 14px;
  --s-3: 22px;
  --s-4: 36px;
  --s-5: 56px;
  --s-6: 88px;
  --s-7: 136px;
  --gutter: clamp(1rem, -0.1667rem + 5.185vw, 4.5rem);          /* 16 -> 72 page side padding */
  --band-y: clamp(5.5rem, 3.8333rem + 7.407vw, 10.5rem);        /* 88 -> 168 between landing sections */
  --page-max: 1440px;
  --col-read: 776px;                                            /* thread column incl. padding */
  --pad-card: clamp(1.25rem, .8333rem + 1.852vw, 2.25rem);      /* 20 -> 36 inside cards */

  /* ---------- radii: deliberate set ---------- */
  --r-tick: 2px;       /* needles, horizon lines */
  --r-key: 6px;        /* focus ring, <strong> mark */
  --r-badge: 11px;     /* App Store badge */
  --r-qr: 16px;        /* QR plate */
  --r-card: clamp(22px, 20.67px + .37vw, 26px);  /* question, answer, feature cards */
  --r-clip: 28px;      /* 9:16 clip frame */
  --r-pill: 999px;     /* capsule, chips, buttons */

  /* ---------- elevation (dark scene: shadows are depth, never glow) ---------- */
  --lift-clip: 0 50px 90px -40px rgb(4 4 10 / .7);
  --lift-glass: inset 0 1px 0 var(--glass-shine), 0 18px 40px -12px rgb(4 4 10 / .6);
  --lift-qr: 0 24px 48px -20px rgb(4 4 10 / .7);
  --blur-glass: blur(22px) saturate(170%);

  /* ---------- motion ---------- */
  /* spatial spring = app .spring(duration: .45, bounce: .18) */
  --spring: linear(0, .28 8%, .82 20%, 1.06 31%, 1.03 42%, .995 58%, 1);
  --t-spring: .45s;
  --fade: .2s ease-out;            /* opacity and colour */
  --press: .96;                    /* :active scale */
  --stagger: 14ms;                 /* split-text per character */

  /* ---------- z-layers ---------- */
  --z-card-head: 3;     /* sticky answer header */
  --z-best-mark: 4;
  --z-qbar: 6;          /* sticky question bar */
  --z-dock: 20;         /* Answer in the app capsule */
  --z-masthead: 30;
  --z-grain: 100;       /* pointer-events: none */

  /* ---------- floating dock geometry ---------- */
  --dock-h: 60px;                                   /* capsule height incl. padding */
  --dock-gap: 20px;                                 /* from the bottom edge */
  --dock-clear: calc(var(--dock-h) + var(--dock-gap) * 2);  /* space reserved at page end */
}

@supports (color: oklch(0 0 0)) {
  :root {
    --midnight:   oklch(0.138 0.018 277.4);
    --harbor:     oklch(0.166 0.029 279.6);
    --causeway:   oklch(0.278 0.074 277.2);
    --overpass:   oklch(0.356 0.085 271.0);
    --plum-hour:  oklch(0.355 0.071 317.6);
    --neon-cream: oklch(0.975 0.060 101.3);
    --haze:       oklch(0.914 0.047 296.2);
    --lilac:      oklch(0.839 0.071 293.8);
    --surf:       oklch(0.915 0.057 188.1);
    --flamingo:   oklch(0.842 0.093 1.4);
    --sea-dusk:   oklch(0.584 0.172 272.1);
    --motel-neon: oklch(0.617 0.190 346.9);
    --last-light: oklch(0.778 0.149 54.0);
  }
}