/* Dapper design tokens.
   Glass surfaces are a web approximation of Apple's materials (backdrop-filter + layered borders),
   not an official Apple package. */
@font-face{font-family:"Geist";src:url("../assets/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}

:root{
  color-scheme:light dark;

  /* Type */
  --font:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --fs-xs:.75rem;  --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:clamp(2rem,4.2vw,3rem);
  --fs-display:clamp(2.6rem,6.4vw,4.75rem);
  --lh-tight:1.04; --lh-snug:1.25; --lh-body:1.55;
  --tr-tight:-.035em; --tr-snug:-.02em; --tr-wide:.08em;

  /* Space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px;

  /* Shape: pills for controls, 24px for surfaces, 14px for inner tiles */
  --r-pill:999px; --r-lg:24px; --r-md:14px; --r-sm:10px;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:linear(0,.009,.035 2.1%,.141,.281 6.7%,.723 12.9%,.938 16.7%,1.017,1.077,1.121,1.149 24.3%,1.159,1.163,1.161,1.154 29.9%,1.129 32.8%,1.051 39.6%,1.017 43.1%,.991,.977 51%,.974 53.8%,.975 57.1%,.997 69.8%,1.003 76.9%,1);
  --d-fast:160ms; --d-base:320ms; --d-slow:620ms;

  /* Layers */
  --z-bg:-1; --z-grain:1; --z-nav:20; --z-sheet:40;

  /* Light theme */
  --bg:#eef0f3;
  --mesh-a:#b9c6ff; --mesh-b:#ffd9c2; --mesh-c:#c9e7dc;
  --text:#14161a; --text-2:rgba(20,22,26,.66); --text-3:rgba(20,22,26,.46);
  --glass:rgba(255,255,255,.52); --glass-strong:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.75); --hairline:rgba(20,22,26,.08);
  --shadow:0 1px 2px rgba(30,40,70,.06),0 12px 40px rgba(30,40,70,.10);
  --accent:#3355ff; --accent-ink:#fff; --accent-soft:rgba(51,85,255,.12);
  --good:#1f8a4c; --bad:#c2352b;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0c0d10;
  --mesh-a:#1f2c7a; --mesh-b:#5a2f1c; --mesh-c:#123b33;
  --text:#f2f3f5; --text-2:rgba(242,243,245,.68); --text-3:rgba(242,243,245,.44);
  --glass:rgba(30,32,38,.48); --glass-strong:rgba(36,38,45,.78);
  --glass-edge:rgba(255,255,255,.12); --hairline:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 16px 50px rgba(0,0,0,.38);
  --accent:#6f8bff; --accent-ink:#0c0d10; --accent-soft:rgba(111,139,255,.16);
  --good:#4cd38a; --bad:#ff6b5e;
}}
@media (prefers-reduced-motion:reduce){:root{--d-fast:0ms;--d-base:0ms;--d-slow:0ms}}