/* Veso Design System tokens (https://claude.ai/artifact/6zPcHRQ5xHjoP3bJtWHjBt), version 1.
   Mist is the light theme and Night the dark one; the system setting picks. Fonts are self-hosted from /fonts/
   (web/fonts.sh); without them the fallbacks in each family apply. */
@font-face { font-family: "Cabinet Grotesk"; src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Supreme"; src: url("/fonts/Supreme-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Tabular"; src: url("/fonts/Tabular-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --mist: #DCE4EA;
  --mist-raised: #EEF2F5;
  --ink: #101B26;
  --ink-muted: #4A5866;
  --on-ink: #EEF2F5;
  --hairline: #AEBBC6;
  --panel: #101B26;
  --panel-raised: #1F2C39;
  --on-panel: #EEF2F5;
  --on-panel-muted: #8E9DAB;
  --on-panel-sub: #B9C4CE;
  --panel-action: #DCE4EA;
  --on-panel-action: #101B26;
  --focus: #2F5FD0;
  --font-display: "Cabinet Grotesk", "Arial Black", system-ui, sans-serif;
  --font-text: Supreme, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: Tabular, ui-monospace, "SF Mono", Menlo, monospace;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-button: 14px;
  --radius-photo: 16px;
  --radius-tile: 18px;
  --radius-panel: 24px;
  --radius-pill: 999px;
  --dur-press: 120ms;
  --dur-fade: 200ms;
  --dur-page: 320ms;
  --dur-reveal: 480ms;
  --dur-settle: 700ms;
  --dur-trace: 1600ms;
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-trace: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --mist: #0E1822;
    --mist-raised: #172331;
    --ink: #E4EAF0;
    --ink-muted: #A3B1BE;
    --on-ink: #0E1822;
    --hairline: #2E3E4D;
    --panel: #1D2B39;
    --panel-raised: #2C3D4D;
    --on-panel: #EEF2F5;
    --on-panel-muted: #93A3B2;
    --on-panel-sub: #B9C4CE;
    --panel-action: #E4EAF0;
    --on-panel-action: #0E1822;
    --focus: #7FA6FF;
  }
}