/* Written by `pnpm tokens` from src/ui/tokens' token files (T-1130): edit those, not this. */
/*
 * usetruman.com's own colours, added to tokens.tokens.json for the marketing site only. The home
 * page's hero is drawn on ink, the brand's one bold ground (docs/brand/README.md, the app icon's
 * ground), the same in either theme; inside it the page takes the dark theme's roles for its
 * accent, its brass and its states, so only the ink itself and the text and fields drawn on it are
 * named here. The site's tokens.css is light first, the way a web page is, with the dark theme for
 * the system's choice and for any region marked `data-theme='dark'`, which is how the hero takes
 * it.
 */

:root {
  --surface: #f9fafc;
  --surface-container: #f0f3f6;
  --surface-container-high: #e6eaf0;
  --on-surface: #141b24;
  --on-surface-variant: #4c5663;
  --outline: #848d98;
  --outline-variant: #d4dae1;
  --primary: #2463ae;
  --on-primary: #f8fafd;
  --primary-container: color-mix(in srgb, var(--primary) 14%, transparent);
  --brass: #946c25;
  --success: #1d7d3e;
  --success-container: color-mix(in srgb, var(--success) 12%, transparent);
  --warning: #a95f17;
  --warning-container: color-mix(in srgb, var(--warning) 10%, transparent);
  --error: #c52b30;
  --error-container: color-mix(in srgb, var(--error) 12%, transparent);
  --info: #097689;
  --info-container: color-mix(in srgb, var(--info) 12%, transparent);
  --state-hover: color-mix(in srgb, var(--on-surface) 8%, transparent);
  --state-focus: color-mix(in srgb, var(--on-surface) 10%, transparent);
  --state-selected: color-mix(in srgb, var(--primary) 10%, transparent);
  --font-sans:
    'Segoe UI Variable Text', 'Segoe UI', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono:
    'JetBrains Mono', ui-monospace, 'Cascadia Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  --font-brand: 'Instrument Sans', var(--font-sans);
  --scrim: rgb(20 27 36 / 35%);
  --web-canvas: #ffffff;
  --duration-state: 100ms;
  --duration-menu: 150ms;
  --duration-settle: 200ms;
  --duration-panel: 250ms;
  --duration-beat: 5s;
  --ink: #13233a;
  --on-ink: #eef2f6;
  --on-ink-variant: #b8c4d4;
  --on-ink-lede: #d6dde6;
  --ink-field: #1b2e48;
  --ink-line: #3b5271;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #0b0f14;
    --surface-container: #12161b;
    --surface-container-high: #1b2025;
    --on-surface: #e4e8ed;
    --on-surface-variant: #b0b8c3;
    --outline: #656d76;
    --outline-variant: #292e35;
    --primary: #83bdf8;
    --on-primary: #091628;
    --brass: #e0b76c;
    --success: #6fd087;
    --warning: #faa453;
    --error: #fa7c77;
    --info: #71d0d5;
    --state-selected: color-mix(in srgb, var(--primary) 14%, transparent);
    --scrim: rgb(5 6 8 / 60%);

    color-scheme: dark;
  }
}

[data-theme='dark'] {
  --surface: #0b0f14;
  --surface-container: #12161b;
  --surface-container-high: #1b2025;
  --on-surface: #e4e8ed;
  --on-surface-variant: #b0b8c3;
  --outline: #656d76;
  --outline-variant: #292e35;
  --primary: #83bdf8;
  --on-primary: #091628;
  --brass: #e0b76c;
  --success: #6fd087;
  --warning: #faa453;
  --error: #fa7c77;
  --info: #71d0d5;
  --state-selected: color-mix(in srgb, var(--primary) 14%, transparent);
  --scrim: rgb(5 6 8 / 60%);

  color-scheme: dark;
}