/* ── Verve Vista · design tokens ───────────────────────────────
   Dark is the default. Light is a full inversion of the surfaces,
   with one exception: the hero frame and the opening are photographic
   night scenes, so they keep the dark palette in both themes — see
   the "dark islands" block at the foot of this file.
   ═════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;

  --ground:      #030304;
  --ground-lift: #08090C;
  --ground-deep: #000000;

  --ice:         #F4F5F7;
  --ice-rgb:     244,245,247;
  --ice-soft:    rgba(244,245,247,.62);
  --ice-faint:   rgba(244,245,247,.40);
  --ice-ghost:   rgba(244,245,247,.22);

  /* one accent: the cold light of the portal */
  --signal:      #8FD8F0;
  --signal-hot:  #DCF4FE;
  --signal-deep: #2B5768;
  --on-signal:   #04070A;

  --rule:        rgba(255,255,255,.10);
  --rule-lit:    rgba(255,255,255,.22);
  --rule-hot:    rgba(143,216,240,.45);

  /* glass */
  --glass-blur:  blur(26px) saturate(1.25);
  --glass:       linear-gradient(152deg, rgba(255,255,255,.085), rgba(255,255,255,.028) 62%);
  --glass-lift:  linear-gradient(152deg, rgba(255,255,255,.135), rgba(255,255,255,.045) 62%);
  --glass-edge:  inset 0 1px 0 rgba(255,255,255,.15), inset 0 0 0 1px rgba(255,255,255,.055);
  --glass-drop:  0 34px 90px -34px rgba(0,0,0,.95), 0 4px 22px -12px rgba(0,0,0,.7);

  /* the solid plate that anchors each journey */
  --plate:       linear-gradient(150deg,#F7F9FA,#DCE4E9);
  --plate-lift:  linear-gradient(150deg,#FFFFFF,#E6ECF0);
  --on-plate:    #05070A;
  --on-plate-rgb:5,7,10;

  /* the light field over the journey */
  --bloom-a:     rgba(143,216,240,.15);
  --bloom-b:     rgba(220,244,254,.11);
  --bloom-c:     rgba(143,216,240,.10);
  --scrim:       3,3,4;
  /* type */
  --f-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --t-micro:   .75rem;
  --t-small:   .9375rem;
  --t-body:    1rem;
  --t-lead:    clamp(1.08rem, 1.32vw, 1.52rem);
  --t-sub:     clamp(1.15rem, 1.55vw, 1.95rem);
  --t-h3:      clamp(1.4rem, 2.1vw, 2rem);
  --t-h2:      clamp(2rem, 5vw, 5.4rem);
  --t-hero:    clamp(2.5rem, 8.4vw, 13rem);
  --hero-line-a: 26.09cqw;   /* ALWAYS is 3.8324em wide  */
  --hero-line-b: 18.50cqw;   /* ANSWERED is 5.4046em wide */

  --track-mono: .2em;

  /* frame */
  --gutter:    clamp(18px, 2.6vw, 46px);
  --radius:    26px;
  --radius-sm: 15px;
  --measure:   1840px;

  /* motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --dur:       .5s;
  --dur-slow:  1.1s;

  /* hero stage — handset geometry inside the 1152×1536 render */
  --screen-x:  38.802%;
  --screen-y:  28.255%;
  --screen-w:  23.524%;
  --screen-h:  40.104%;

  /* the handset's lean */
  --tilt-z:    9deg;
  --tilt-y:   -15deg;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur:.01ms; --dur-slow:.01ms; --tilt-z:6deg; --tilt-y:-9deg; }
}

/* ── light ────────────────────────────────────────────────────── */
:root[data-theme="light"]{
  color-scheme:light;

  --ground:      #F3F3F0;
  --ground-lift: #FFFFFF;
  --ground-deep: #E8E8E3;

  --ice:         #0C0E11;
  --ice-rgb:     12,14,17;
  --ice-soft:    rgba(12,14,17,.68);
  --ice-faint:   rgba(12,14,17,.48);
  --ice-ghost:   rgba(12,14,17,.32);

  --signal:      #0E6B87;
  --signal-hot:  #0A5468;
  --signal-deep: #A9D8E7;
  --on-signal:   #FFFFFF;

  --rule:        rgba(12,14,17,.14);
  --rule-lit:    rgba(12,14,17,.28);
  --rule-hot:    rgba(14,107,135,.48);

  --glass-blur:  blur(24px) saturate(1.1);
  --glass:       linear-gradient(152deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 62%);
  --glass-lift:  linear-gradient(152deg, #FFFFFF, rgba(255,255,255,.82) 62%);
  --glass-edge:  inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(12,14,17,.07);
  --glass-drop:  0 26px 64px -30px rgba(12,14,17,.26), 0 3px 14px -8px rgba(12,14,17,.14);

  /* the anchor plate flips to dark, so it still stands out */
  --plate:       linear-gradient(150deg,#15191E,#05070A);
  --plate-lift:  linear-gradient(150deg,#1D232A,#0A0E13);
  --on-plate:    #F4F5F7;
  --on-plate-rgb:244,245,247;

  --bloom-a:     rgba(14,107,135,.10);
  --bloom-b:     rgba(14,107,135,.07);
  --bloom-c:     rgba(14,107,135,.08);
  --scrim:       243,243,240;
}

/* no explicit choice yet: follow the operating system */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]):not([data-theme="light"]){
    color-scheme:light;
    --ground:#F3F3F0; --ground-lift:#FFFFFF; --ground-deep:#E8E8E3;
    --ice:#0C0E11; --ice-rgb:12,14,17;
    --ice-soft:rgba(12,14,17,.68); --ice-faint:rgba(12,14,17,.48); --ice-ghost:rgba(12,14,17,.32);
    --signal:#0E6B87; --signal-hot:#0A5468; --signal-deep:#A9D8E7; --on-signal:#FFFFFF;
    --rule:rgba(12,14,17,.14); --rule-lit:rgba(12,14,17,.28); --rule-hot:rgba(14,107,135,.48);
    --glass:linear-gradient(152deg, rgba(255,255,255,.92), rgba(255,255,255,.62) 62%);
    --glass-lift:linear-gradient(152deg, #FFFFFF, rgba(255,255,255,.82) 62%);
    --glass-edge:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(12,14,17,.07);
    --glass-drop:0 26px 64px -30px rgba(12,14,17,.26), 0 3px 14px -8px rgba(12,14,17,.14);
    --plate:linear-gradient(150deg,#15191E,#05070A);
    --plate-lift:linear-gradient(150deg,#1D232A,#0A0E13);
    --on-plate:#F4F5F7; --on-plate-rgb:244,245,247;
    --bloom-a:rgba(14,107,135,.10); --bloom-b:rgba(14,107,135,.07); --bloom-c:rgba(14,107,135,.08);
    --scrim:243,243,240;
  }
}

/* ── dark islands ─────────────────────────────────────────────
   The hero frame, the opening and the handset screen are a night
   photograph. They keep the dark palette whatever the theme, so the
   imagery never has to fight the interface around it.            */
.hero__panel, .intro, .stage__screen{
  color-scheme:dark;
  --ground:#030304; --ground-lift:#08090C; --ground-deep:#000000;
  --ice:#F4F5F7; --ice-rgb:244,245,247;
  --ice-soft:rgba(244,245,247,.62); --ice-faint:rgba(244,245,247,.40); --ice-ghost:rgba(244,245,247,.22);
  --signal:#8FD8F0; --signal-hot:#DCF4FE; --signal-deep:#2B5768; --on-signal:#04070A;
  --rule:rgba(255,255,255,.10); --rule-lit:rgba(255,255,255,.22); --rule-hot:rgba(143,216,240,.45);
  --scrim:3,3,4;
}