/* Asset Tap shared design tokens — the cross-stack palette.
 *
 * CANONICAL COPY. This file is the single source of truth for the brand's
 * color vocabulary across every surface (assettap.dev, the hub, anything
 * that comes later). It contains ONLY custom properties: no selectors, no
 * component rules, no layout. Consumers link it AFTER their base
 * stylesheet so these values win.
 *
 * Vocabulary is devlab-theme's (--color-bg / --color-surface / --color-fg /
 * --color-muted / --color-border / --color-accent / --color-accent-contrast
 * / --color-accent-warm), so the docs site needs no translation layer and
 * the hub adopts one shared vocabulary instead of maintaining a second.
 *
 * Theming is the three-state pattern:
 *   1. :root                                    -> light (the default)
 *   2. prefers-color-scheme: dark, guarded by
 *      :not([data-theme="light"])                -> follow the OS
 *   3. :root[data-theme="dark"|"light"]          -> explicit choice wins
 * The guard matters: without it an explicit light choice on a dark-OS
 * machine survives only by source-order luck.
 *
 * Type stacks live here too: they are brand vocabulary, not layout, and
 * both surfaces must set type identically. Sans body, mono seasoning
 * (mono only where it earns its keep: code, IDs, numeric columns).
 * System stacks — no webfonts, no CDN.
 *
 * Palette provenance: navy/cyan from the Asset Tap logo; amber is the warm
 * accent. Light is a derivation, not an inversion — near-white ground,
 * WHITE surfaces (cards pop upward), solid neutral borders, and a deepened
 * amber (#9a4f1e ~ 4.9:1 on white) so it clears AA.
 */

:root {
  color-scheme: light;

  /* Type (theme-independent) */
  --font-sans:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-mono:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    Menlo,
    monospace;

  /* Ground and ink */
  --color-bg: #f2f6f8;
  --color-surface: #ffffff;
  --color-fg: #0a1628;
  --color-muted: #43596b;
  --color-border: #cbd8e0;

  /* Accents. `accent-contrast` is text ON an accent fill. */
  --color-accent: #175d84;
  --color-accent-contrast: #ffffff;
  --color-accent-warm: #9a4f1e;
  --color-accent-visited: #0c4a6d;

  --shadow-color: 15 23 42;

  /* Code */
  --color-code-bg: #f3f4f6;
  --color-code-fg: #111827;
  --color-pre-bg: #f6f8fa;
  --color-pre-fg: #24292e;

  /* Callouts */
  --color-callout-info-bg: #e8f6fb;
  --color-callout-info-border: #4cb3d4;
  --color-callout-info-fg: #193b47;
  --color-callout-warning-bg: #faf0e6;
  --color-callout-warning-border: #9a4f1e;
  --color-callout-warning-fg: #5c3413;
  --color-callout-error-bg: #feebec;
  --color-callout-error-border: #e13238;
  --color-callout-error-fg: #4b1113;
  --color-callout-tip-bg: #e6f6e6;
  --color-callout-tip-border: #009400;
  --color-callout-tip-fg: #003100;
}

/* Follow the OS unless an explicit light choice says otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0a1628;
    --color-surface: #0f2035;
    --color-fg: #c8dce8;
    --color-muted: #94b8d0;
    --color-border: #1c3a54;

    --color-accent: #52bbdb;
    --color-accent-contrast: #0a1628;
    --color-accent-warm: #d88956;
    --color-accent-visited: #7da8c4;

    --shadow-color: 0 0 0;

    --color-code-bg: #1f2937;
    --color-code-fg: #f9fafb;
    --color-pre-bg: #24292e;
    --color-pre-fg: #e1e4e8;

    --color-callout-info-bg: #193b47;
    --color-callout-info-border: #4cb3d4;
    --color-callout-info-fg: #c8ecf7;
    --color-callout-warning-bg: #3a2314;
    --color-callout-warning-border: #d88956;
    --color-callout-warning-fg: #f2cdb0;
    --color-callout-error-bg: #4b1113;
    --color-callout-error-border: #e13238;
    --color-callout-error-fg: #fccfd0;
    --color-callout-tip-bg: #003100;
    --color-callout-tip-border: #009400;
    --color-callout-tip-fg: #b8e6b8;
  }
}

/* An explicit choice always wins, in both directions. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0a1628;
  --color-surface: #0f2035;
  --color-fg: #c8dce8;
  --color-muted: #94b8d0;
  --color-border: #1c3a54;

  --color-accent: #52bbdb;
  --color-accent-contrast: #0a1628;
  --color-accent-warm: #d88956;
  --color-accent-visited: #7da8c4;

  --shadow-color: 0 0 0;

  --color-code-bg: #1f2937;
  --color-code-fg: #f9fafb;
  --color-pre-bg: #24292e;
  --color-pre-fg: #e1e4e8;

  --color-callout-info-bg: #193b47;
  --color-callout-info-border: #4cb3d4;
  --color-callout-info-fg: #c8ecf7;
  --color-callout-warning-bg: #3a2314;
  --color-callout-warning-border: #d88956;
  --color-callout-warning-fg: #f2cdb0;
  --color-callout-error-bg: #4b1113;
  --color-callout-error-border: #e13238;
  --color-callout-error-fg: #fccfd0;
  --color-callout-tip-bg: #003100;
  --color-callout-tip-border: #009400;
  --color-callout-tip-fg: #b8e6b8;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f2f6f8;
  --color-surface: #ffffff;
  --color-fg: #0a1628;
  --color-muted: #43596b;
  --color-border: #cbd8e0;

  --color-accent: #175d84;
  --color-accent-contrast: #ffffff;
  --color-accent-warm: #9a4f1e;
  --color-accent-visited: #0c4a6d;

  --shadow-color: 15 23 42;

  --color-code-bg: #f3f4f6;
  --color-code-fg: #111827;
  --color-pre-bg: #f6f8fa;
  --color-pre-fg: #24292e;

  --color-callout-info-bg: #e8f6fb;
  --color-callout-info-border: #4cb3d4;
  --color-callout-info-fg: #193b47;
  --color-callout-warning-bg: #faf0e6;
  --color-callout-warning-border: #9a4f1e;
  --color-callout-warning-fg: #5c3413;
  --color-callout-error-bg: #feebec;
  --color-callout-error-border: #e13238;
  --color-callout-error-fg: #4b1113;
  --color-callout-tip-bg: #e6f6e6;
  --color-callout-tip-border: #009400;
  --color-callout-tip-fg: #003100;
}