/*
 * @abhishekshankar/ds 0.1.0: tokens (light default, opt-in dark)
 * Generated by scripts/build.mjs. Do not edit: change tokens/tokens.json or src/ instead.
 */

:root {
  /* ---------- color ---------- */
  --color-text-primary: #0a0a0a;
  --color-text-secondary: #717182;
  --color-text-danger: #a43a30;
  --color-surface-0: #ffffff; /* page */
  --color-surface-10: #fbf9f8; /* raised: tiles, cards, inputs */
  --color-surface-inverse: #1f1e1d; /* dark cards, dark tiles */
  --color-text-on-inverse: #f8f7f5;
  --color-text-on-inverse-secondary: rgba(255, 255, 255, 0.6);
  --color-border: rgba(0, 0, 0, 0.06);
  --color-border-strong: rgba(0, 0, 0, 0.24); /* focused field */
  --color-border-inverse: rgba(255, 255, 255, 0.08);
  --color-divider: rgba(0, 0, 0, 0.05); /* section rules */
  --color-fill-hover: rgba(0, 0, 0, 0.03);
  --color-focus-halo: rgba(0, 0, 0, 0.05);
  --color-accent: #6fb0c0; /* teal; use sparingly */
  --color-accent-subtle: rgba(111, 176, 192, 0.08);
  --color-accent-border: rgba(111, 176, 192, 0.24);
  --color-accent-glow: rgba(111, 176, 192, 0.2); /* radial glow on accent cards */
  --color-caption-on-inverse: rgba(255, 255, 255, 0.9); /* tile caption text on inverse tiles */
  --color-caption-on-inverse-bg: rgba(38, 38, 41, 0.94); /* tile caption fill on inverse tiles */
  --color-caption-on-inverse-border: rgba(255, 255, 255, 0.12); /* tile caption border on inverse tiles */

  /* ---------- font ---------- */
  --font-sans: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-mono: "Reddit Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- text ---------- */
  --text-display-size: clamp(42px, 3.8vw, 58px);
  --text-display-weight: 450;
  --text-display-tracking: -0.055em;
  --text-display-leading: 0.98;
  --text-subtitle-size: clamp(22px, 2vw, 28px);
  --text-subtitle-weight: 400;
  --text-subtitle-tracking: -0.02em;
  --text-subtitle-leading: 1.4;
  --text-h2-size: clamp(29px, 4vw, 48px); /* editorial section heading, weight 400 */
  --text-h2-tracking: -0.035em;
  --text-h2-leading: 1.12;
  --text-title-size: 32px; /* list/section title, weight 500 */
  --text-h3-size: 20px; /* card/callout title, weight 500 */
  --text-heading-tracking: -0.02em;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-small: 14px;
  --text-caption: 13px;
  --text-eyebrow: 12px; /* 600, uppercase, +0.09em */
  --text-eyebrow-tracking: 0.09em;
  --text-prose-size: 17px; /* serif long-form */
  --text-prose-leading: 1.68;

  /* ---------- space ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: clamp(88px, 11vw, 152px);
  --space-section-compact: clamp(64px, 8vw, 96px);

  /* ---------- radius ---------- */
  --radius-xs: 4px; /* small controls inside widgets */
  --radius-sm: 6px; /* chips */
  --radius-md: 10px; /* inputs, icon wells, buttons */
  --radius-lg: 16px; /* tiles, cards, callouts, media */
  --radius-xl: 20px; /* floating sheets */
  --radius-pill: 999px; /* captions, pills */

  /* ---------- shadow ---------- */
  --shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-float: 0 8px 48px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-float-dark: 0 6px 18px rgba(0, 0, 0, 0.28);
  --shadow-focus-halo: 0 0 0 3px var(--color-focus-halo); /* soft ring on focused fields */

  /* ---------- container ---------- */
  --container-padding: clamp(20px, 3vw, 40px);
  --container-inner: min(1280px, 100vw - 2 * var(--container-padding));

  /* ---------- center ---------- */
  --center-column-width: clamp(700px, 62.5vw, 900px);

  /* ---------- reading ---------- */
  --reading-column-width: 700px;

  /* ---------- nav ---------- */
  --nav-height: 64px;

  /* ---------- tap ---------- */
  --tap-target: 44px;

  /* ---------- motion ---------- */
  --motion-duration-fast: 150ms; /* hover, focus, tooltips */
  --motion-duration-moderate: 200ms; /* toggles, menus, control state */
  --motion-duration-page: 280ms; /* page / view enter */
  --motion-duration-page-exit: 180ms; /* exit, always shorter than enter */
  --motion-duration-reveal: 450ms; /* image and media fade-in (the one token over 300ms) */
  --motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* in-place state change */
  --motion-ease-enter: cubic-bezier(0.22, 1, 0.36, 1); /* decelerate into place */
  --motion-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* accelerate away */
  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* small overshoot, rare */
  --motion-shift-page: 4vw; /* page slide distance */
  --motion-shift-small: 4px; /* caption rise, nudges */
}

/*
 * Light is the default, whatever the OS says. Dark is a user preference:
 *   data-theme="dark"    the user chose dark (persist their choice, e.g. localStorage)
 *   data-theme="system"  the user chose to follow the OS setting
 */
:root[data-theme="dark"] {
  --color-text-primary: #f8f7f5;
  --color-text-secondary: #a09f9b;
  --color-text-danger: #e0786d;
  --color-surface-0: #171615;
  --color-surface-10: #1f1e1d;
  --color-surface-inverse: #f8f7f5;
  --color-text-on-inverse: #0a0a0a;
  --color-text-on-inverse-secondary: rgba(0, 0, 0, 0.6);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.28);
  --color-border-inverse: rgba(0, 0, 0, 0.06);
  --color-divider: rgba(255, 255, 255, 0.06);
  --color-fill-hover: rgba(255, 255, 255, 0.04);
  --color-focus-halo: rgba(255, 255, 255, 0.08);
  --shadow-float: 0 8px 48px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    --color-text-primary: #f8f7f5;
    --color-text-secondary: #a09f9b;
    --color-text-danger: #e0786d;
    --color-surface-0: #171615;
    --color-surface-10: #1f1e1d;
    --color-surface-inverse: #f8f7f5;
    --color-text-on-inverse: #0a0a0a;
    --color-text-on-inverse-secondary: rgba(0, 0, 0, 0.6);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.28);
    --color-border-inverse: rgba(0, 0, 0, 0.06);
    --color-divider: rgba(255, 255, 255, 0.06);
    --color-fill-hover: rgba(255, 255, 255, 0.04);
    --color-focus-halo: rgba(255, 255, 255, 0.08);
    --shadow-float: 0 8px 48px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  }
}

/* ---------- Base ---------- */
/* Native UI (form controls, scrollbars) matches the active theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] { color-scheme: dark; } }

body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after,
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}