/* Adventrous design-system tokens — imported from the BigBrain desktop
   mockup (claude.ai/design project c25db7b6, _ds/adventrous-design-system).
   colors + typography + space + themes, verbatim values; fonts loaded via
   Google Fonts (drop .woff2 in assets/fonts + @font-face to self-host).
   Full mockup reference: docs/design/mockup/BigBrain.dc.html */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap");

:root {
  /* neutrals, warm-tinted */
  --paper: #fcfcfa;
  --paper-desk: #e8e6e1;
  --paper-sunk: #f2f0ea;
  --paper-raised: #f1f1ee;
  --ink-900: #141414;
  --ink-800: #161616;
  --ink-700: #3a3a38;
  --ink-600: #57554d;
  --ink-500: #77756c;
  --ink-400: #8a877e;
  --ink-300: #9d9b92;
  --ink-200: #a8a69d;
  --ink-100: #c7c5bd;
  --ink-050: #cdcbc3;
  --line: #e8e3d6;

  /* accents — a collection keeps its hue for life. Five DISTINCT hues on
     purpose: accent-4 was once #6366f1, a near-duplicate of accent-1's
     indigo, which made hash-assigned chips (BigBrain vs granola)
     indistinguishable. */
  --accent-1: #4f46e5;
  --accent-2: #d99a2b;
  --accent-3: #3fa34d;
  --accent-4: #0d9488;
  --accent-5: #d857a8;

  /* semantic aliases — screens reference only these */
  --bg: var(--paper);
  --surface: var(--paper-raised);
  --well: var(--paper-sunk);
  --rule: var(--line);
  --text: var(--ink-800);
  --text-strong: var(--ink-900);
  --text-note: var(--ink-600);
  --text-muted: var(--ink-300);
  --text-faint: var(--ink-200);
  --text-ghost: var(--ink-050);
  --dash: var(--ink-100);
  --icon: #5c5a52;
  --on-accent: #ffffff;

  /* typography — one knob: --font-app */
  --font-app: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, Menlo, "SF Mono", monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fs-hero: 56px;
  --fs-display: 40px;
  --fs-title: 34px;
  --fs-heading: 24px;
  --fs-prose: 20px;
  --fs-lead: 18px;
  --fs-chip: 16px;
  --fs-body: 15px;
  --fs-meta: 12px;
  --fs-eyebrow: 11px;
  --ls-hero: -0.035em;
  --ls-title: -0.03em;
  --ls-heading: -0.022em;
  --ls-meta: 0.02em;
  --ls-eyebrow: 0.24em;
  --type-hero: var(--fw-medium) var(--fs-hero)/1 var(--font-app);
  --type-display: var(--fw-medium) var(--fs-display)/1 var(--font-app);
  --type-title: var(--fw-medium) var(--fs-title)/1 var(--font-app);
  --type-heading: var(--fw-medium) var(--fs-heading)/1 var(--font-app);
  --type-prose: var(--fw-regular) var(--fs-prose)/1.5 var(--font-app);
  --type-lead: var(--fw-medium) var(--fs-lead)/1 var(--font-app);
  --type-chip: var(--fw-medium) var(--fs-chip)/1 var(--font-app);
  --type-body: var(--fw-regular) var(--fs-body)/1.5 var(--font-app);
  --type-meta: var(--fw-regular) var(--fs-meta)/1.5 var(--font-app);
  --type-eyebrow: var(--fw-semibold) var(--fs-eyebrow)/1 var(--font-app);
  --type-mono: var(--fw-semibold) 10.5px/1 var(--font-mono);

  /* space/size/radius/shadow/motion — off-grid rhythm, don't snap */
  --gutter: 26px;
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 13px;
  --sp-5: 16px;
  --sp-6: 22px;
  --sp-7: 24px;
  --sp-8: 26px;
  --sp-9: 34px;
  --sp-10: 44px;
  --size-dot: 6px;
  --size-icon-btn: 40px;
  --r-cell: 3px;
  --r-sm: 5px;
  --r-chip: 11px;
  --r-card: 20px;
  --r-device: 44px;
  --r-full: 999px;
  --shadow-knob: 0 1px 6px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 12px 34px -16px rgba(0, 0, 0, 0.3);
  --shadow-device: 0 22px 60px -18px rgba(0, 0, 0, 0.4);
  --dur-fast: 0.22s;
  --dur-slow: 0.25s;
  --ease: ease;
}

/* Themes — whole palettes, terminal-scheme style. Apply data-theme on any
   ancestor; default (cream) needs no attribute.

   `color-scheme` rides along with each palette so the parts of the page the
   UA paints — scrollbars, form controls, the canvas behind the app — match
   the palette we chose rather than the OS's own guess. Without it a dark
   theme on a light desktop gets light scrollbars, and (worse) a cream theme
   on a dark desktop gets dark ones. It is declared per-palette, not from
   prefers-color-scheme, because the palette is the thing being described:
   lib/theme.ts already decided, and this must not disagree with it. */
:root { color-scheme: light; }
[data-theme="dracula"], [data-theme="gruvbox"] { color-scheme: dark; }
[data-theme="solarized"] { color-scheme: light; }

[data-theme="dracula"] {
  --bg: #282a36;
  --paper-desk: #1b1c24;
  --surface: #3a3d4e;
  --well: rgba(0, 0, 0, 0.22);
  --rule: #3a3d4e;
  --text: #f8f8f2;
  --text-strong: #ffffff;
  --text-note: rgba(248, 248, 242, 0.92);
  --text-muted: #9294a8;
  --text-faint: #6b6f85;
  --text-ghost: #4b4e63;
  --dash: #565973;
  --icon: #9294a8;
  --on-accent: #282a36;
  --accent-1: #bd93f9;
  --accent-2: #ffb86c;
  --accent-3: #50fa7b;
  --accent-4: #8be9fd;
  --accent-5: #ff79c6;
}
[data-theme="gruvbox"] {
  --bg: #282828;
  --paper-desk: #1d2021;
  --surface: #3c3836;
  --well: rgba(0, 0, 0, 0.22);
  --rule: #3c3836;
  --text: #ebdbb2;
  --text-strong: #fbf1c7;
  --text-note: rgba(235, 219, 178, 0.92);
  --text-muted: #a89984;
  --text-faint: #7c6f64;
  --text-ghost: #463f3a;
  --dash: #504945;
  --icon: #a89984;
  --on-accent: #282828;
  --accent-1: #83a598;
  --accent-2: #fabd2f;
  --accent-3: #b8bb26;
  --accent-4: #d3869b;
  --accent-5: #fe8019;
}
[data-theme="solarized"] {
  --bg: #fdf6e3;
  --paper-desk: #eee8d5;
  --surface: #eee8d5;
  --well: #eee8d5;
  --rule: #e3dcc4;
  --text: #586e75;
  --text-strong: #073642;
  --text-note: #4a5f66;
  --text-muted: #93a1a1;
  --text-faint: #b6ad97;
  --text-ghost: #cbc3a8;
  --dash: #cfc7ac;
  --icon: #93a1a1;
  --on-accent: #fdf6e3;
  --accent-1: #6c71c4;
  --accent-2: #b58900;
  --accent-3: #859900;
  --accent-4: #268bd2;
  --accent-5: #d33682;
}