/* chow design tokens — dark first, light via prefers-color-scheme */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-wdth.woff2") format("woff2-variations"), url("../fonts/archivo-wdth.woff2") format("woff2");
}

:root {
  color-scheme: dark light;
  --font: "Archivo", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  --type-display:     700 2.6rem/1.09 var(--font);
  --type-title:       750 1.65rem/1.21 var(--font);
  --type-title-2:     700 1.3rem/1.27 var(--font);
  --type-headline:    650 1rem/1.29 var(--font);
  --type-body:        400 1rem/1.29 var(--font);
  --type-callout:     400 .88rem/1.33 var(--font);
  --type-footnote:    400 .76rem/1.38 var(--font);
  --type-caption:     500 .7rem/1.33 var(--font);
  --type-tab:         500 .6rem/1.2 var(--font);
  --type-label-title: 900 2rem/1.12 var(--font);
  --type-label-row:   400 .88rem/1.33 var(--font);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter: var(--sp-5);
  --tap: 44px;  --tap-lg: 56px;
  --r-card: 20px; --r-ctl: 14px;
  --rule-section: 10px; --rule-group: 4px; --rule-row: 1px;
  --dur: 240ms; --ease: cubic-bezier(.2, .8, .2, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar-h: calc(96px + var(--safe-bottom));   /* floating glass pill + air */
  --dock-h: 81px;
  --max-w: 600px;

  --bg: #0A0B0B;        --surface: #151716;
  --surface-2: #1F2221; --surface-3: #2C302E;
  --seg-on: #3A3F3C;
  --ink: #F3F4F1;  --ink-2: #B0B5B1;  --ink-3: #878D89;
  --line: #232725; --rule: #F3F4F1;
  --hair: rgba(243, 244, 241, .38);
  --accent: #F28AB3; --accent-2: #C4668E; --accent-3: #874864;
  --accent-tint: rgba(242, 138, 179, .14);
  --on-accent: #1B0811;
  --water: #5EB7F2; --water-tint: rgba(94, 183, 242, .16);
  --over: #F2B441; --over-tint: rgba(242, 180, 65, .16);
  --scrim: rgba(0, 0, 0, .62);
  --e-sheet: 0 -1px 0 #2C302E;
  --e-toast: 0 0 0 1px #2C302E;
  --glass: rgba(31, 34, 33, .66); --glass-line: rgba(243, 244, 241, .10); --glass-on: rgba(243, 244, 241, .13);
  --e-glass: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  --e-fab: 0 8px 24px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .28);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #F5F5F2;        --surface: #FFFFFF;
    --surface-2: #ECEDE9; --surface-3: #DCDED9;
    --seg-on: #FFFFFF;
    --ink: #111312;  --ink-2: #4A504C;  --ink-3: #636965;
    --line: #DCDED9; --rule: #111312;
    --hair: rgba(17, 19, 18, .5);
    --accent: #A3255B; --accent-2: #C9568A; --accent-3: #E59BBB;
    --accent-tint: rgba(163, 37, 91, .08);
    --on-accent: #FFFFFF;
    --water: #176DB3; --water-tint: rgba(23, 109, 179, .10);
    --over: #9A6200; --over-tint: rgba(154, 98, 0, .10);
    --scrim: rgba(17, 19, 18, .4);
    --e-sheet: 0 -8px 32px rgba(17, 19, 18, .14);
    --e-toast: 0 8px 24px rgba(17, 19, 18, .18);
    --glass: rgba(255, 255, 255, .64); --glass-line: rgba(17, 19, 18, .08); --glass-on: rgba(17, 19, 18, .08);
    --e-glass: 0 10px 30px rgba(17, 19, 18, .16), inset 0 1px 0 rgba(255, 255, 255, .7);
    --e-fab: 0 8px 24px rgba(163, 37, 91, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}