/* Desert Ant Labs design tokens, mirrored for the shared demo kit.
 *
 * Provenance: desert-ant-labs/design-system tokens/{colors,typography,
 * spacing,radius,motion}.css. Values are copied, not invented; when the
 * brand changes there, re-mirror here and re-sync consuming demos.
 * Two deliberate deviations:
 *   - dark mode follows prefers-color-scheme (the design system keys off
 *     [data-theme="dark"]; a static page has no theme switch), and
 *   - fonts are self-hosted woff2 subsets (the design system loads the
 *     same faces from the Google Fonts CDN; this page makes no external
 *     requests). Instrument Serif, Hanken Grotesk, and JetBrains Mono are
 *     all SIL Open Font License 1.1; see assets/fonts/NOTICE.
 */

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/HankenGrotesk-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/InstrumentSerif-latin-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/InstrumentSerif-latin-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/JetBrainsMono-latin-wght.woff2") format("woff2");
}

:root {
  /* colors.css · base ramp, cool silver -> obsidian */
  --sand-50:  #F4F5F5;
  --sand-100: #E8EAEB;
  --sand-200: #D7DBDC;
  --sand-300: #BEC4C6;
  --sand-400: #9DA4A8;
  --sand-500: #7A8286;
  --sand-600: #5A6266;
  --sand-700: #41484C;
  --sand-800: #2C3134;
  --sand-900: #1A1E20;
  --sand-950: #0E1113;

  /* colors.css · polarized-sky cobalt accent */
  --sky-50:  #ECF0FC;
  --sky-100: #D6DFFA;
  --sky-200: #AFC1F3;
  --sky-300: #839DEB;
  --sky-400: #5675DC;
  --sky-500: #2D52C8;
  --sky-600: #2241A8;
  --sky-700: #1C3585;

  /* colors.css · signals (amber is the one warm note) */
  --moss-500:  #3C8A52;
  --amber-500: #C2691A;
  --oxide-500: #BE3A2E;

  --paper: #FBFCFC;
  --white: #FFFFFF;

  /* colors.css · semantic aliases, light */
  --bg-canvas:  var(--sand-50);
  --bg-surface: var(--paper);
  --bg-raised:  var(--white);
  --bg-sunken:  var(--sand-100);
  --bg-accent-soft: var(--sky-50);

  --text-primary:   var(--sand-950);
  --text-secondary: var(--sand-700);
  --text-muted:     var(--sand-500);
  --text-faint:     var(--sand-400);
  --text-accent:    var(--sky-600);

  --border-subtle:  var(--sand-200);
  --border-default: var(--sand-300);

  --accent:          var(--sky-500);
  --accent-hover:    var(--sky-600);
  --accent-contrast: var(--white);
  --focus-ring:      var(--sky-500);
  --selection-bg:    var(--sky-200);
  --selection-fg:    var(--sand-950);
  --warning:         var(--amber-500);

  /* typography.css */
  --font-display: "Instrument Serif", "Spectral", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, "Liberation Mono", Menlo, monospace;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-5xl:  4rem;
  --text-7xl:  7.5rem;

  --leading-none:    1;
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.62;

  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.1em;

  /* spacing.css */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --container-xl: 1280px;
  --control-md: 2.5rem;
  --control-lg: 3rem;

  /* radius.css */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-full: 9999px;
  --border-hair: 1px;
  --shadow-inset: inset 0 1px 2px rgba(40, 30, 15, 0.07);
  --ring-focus: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--focus-ring);

  /* motion.css */
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --transition-colors: color var(--duration-fast) var(--ease-standard),
                       background-color var(--duration-fast) var(--ease-standard),
                       border-color var(--duration-fast) var(--ease-standard);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* colors.css · semantic aliases, dark (cool obsidian, lifted cobalt) */
    --bg-canvas:  #0E1113;
    --bg-surface: #15181B;
    --bg-raised:  #1C2023;
    --bg-sunken:  #090B0C;
    --bg-accent-soft: #15203A;

    --text-primary:   var(--sand-50);
    --text-secondary: var(--sand-300);
    --text-muted:     var(--sand-500);
    --text-faint:     var(--sand-600);
    --text-accent:    var(--sky-300);

    --border-subtle:  #262C30;
    --border-default: #353C40;

    --accent:          var(--sky-400);
    --accent-hover:    var(--sky-300);
    --accent-contrast: var(--sand-950);
    --focus-ring:      var(--sky-300);
    --selection-bg:    var(--sky-700);
    --selection-fg:    var(--sand-50);
    --warning:         #D88B3A;
  }
}

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