/* ============================================================
   TOKENS
   Dark is the default, and its values are the app's own design
   tokens (docs/redesign-handoff.md) so the site and the product
   look like the same thing. Light is opt-in via the toggle.
   ============================================================ */
:root, :root[data-theme="dark"] {
  /* The app's own tokens put the window at #1f1f1f and cards at #292929.
     That step reads fine inside a 1000px window with a frame and a Mica
     backdrop around it; spread across a full web page on a glossy screen it
     goes flat. So the canvas drops instead of the cards rising — surfaces keep
     the value people recognise from the app, and the gap does the work. */
  --sunken:     #0B0B0B;   /* screen interiors — below the page    */
  --ground:     #131313;   /* page canvas (app window is #1f1f1f)  */
  --bar:        #191919;   /* titlebar strip                       */
  --panel:      #1F1F1F;   /* stages, grouped panels               */
  --panel-2:    #252525;
  --card:       #2E2E2E;   /* cards, windows                       */
  --card-hover: #383838;

  --line:       rgba(255,255,255,.16);
  --line-soft:  rgba(255,255,255,.09);
  --line-ctrl:  rgba(255,255,255,.22);
  --raise:      inset 0 1px 0 rgba(255,255,255,.055);

  --text:       rgba(255,255,255,.94);
  --text-2:     rgba(255,255,255,.58);
  --text-3:     rgba(255,255,255,.36);

  --accent:     #1E9BE9;
  --accent-hi:  #3FADEF;
  --accent-ink: #ffffff;
  --accent-tint: rgba(30,155,233,.15);

  --good:       #3FC97C;
  --good-tint:  rgba(63,201,124,.14);

  --sheen:      rgba(255,255,255,.035);            /* screen light falling from above */
  --vignette:   rgba(0,0,0,.42);                   /* edge falloff, gives the page a centre */
  --mica-1:     rgba(30,155,233,.16);   /* accent light, top left  */
  --mica-2:     rgba(120,150,190,.10);  /* cool fill, right        */
  --mica-3:     rgba(30,155,233,.09);   /* accent light, low right */
  --grain:      .05;
  --shadow:     0 1px 2px rgba(0,0,0,.4), 0 14px 34px -14px rgba(0,0,0,.7);
  --shadow-lift:0 2px 6px rgba(0,0,0,.45), 0 30px 64px -22px rgba(0,0,0,.85);
}

:root[data-theme="light"] {
  --sunken:     #E7ECF1;   /* screen interiors — below the surface */
  --ground:     #F2F4F7;
  --bar:        #FFFFFF;
  --panel:      #FFFFFF;
  --panel-2:    #F7F9FB;
  --card:       #FFFFFF;
  --card-hover: #FAFBFC;

  --line:       rgba(13,19,25,.11);
  --line-soft:  rgba(13,19,25,.07);
  --line-ctrl:  rgba(13,19,25,.16);

  --text:       #10161C;
  --text-2:     #55636F;
  --text-3:     #8A96A1;

  --accent:     #0E7FC0;
  --accent-hi:  #1E9BE9;
  --accent-ink: #ffffff;
  --accent-tint: rgba(14,127,192,.10);

  --good:       #17915F;
  --good-tint:  rgba(23,145,95,.12);

  --sheen:      rgba(255,255,255,.65);
  --vignette:   rgba(13,19,25,.07);
  --mica-1:     rgba(14,127,192,.10);
  --mica-2:     rgba(120,150,190,.13);
  --mica-3:     rgba(14,127,192,.07);
  --grain:      .028;
  --shadow:     0 1px 2px rgba(13,19,25,.05), 0 12px 30px -14px rgba(13,19,25,.20);
  --shadow-lift:0 2px 5px rgba(13,19,25,.07), 0 28px 60px -22px rgba(13,19,25,.28);
  --raise:      inset 0 1px 0 rgba(255,255,255,.7);
}

:root {
  --f-ui: "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Consolas, "Roboto Mono", Menlo, monospace;
  --wrap: 1100px;
  --pad: clamp(20px, 5vw, 48px);
}