/* Bonnie Ai — CSS variables from tokens.json (colors, spacing, radius, shadow, fonts). Fluid type and motion: components/bundle.css */
:root {
  --ink: #121316; --ink-2: #17181c; --ink-line: #2e3036;
  --paper: #f2f2ef; --paper-2: #e4e3de; --white: #ffffff;
  --signal: #ff4d12; --signal-2: #ff6a36; --signal-tint: rgba(255, 77, 18, 0.12);
  --gray-700: #3b3d43; --gray-600: #5b5e66; --gray-400: #8c8e94; --gray-300: #a9abb0; --gray-200: #c9cbd0;
  --rule: #c9c8c1; --rule-soft: #d6d5cf;
  --nav-glass-light: rgba(242, 242, 239, 0.72); --nav-glass-dark: rgba(18, 19, 22, 0.72);

  --bg-page: var(--paper); --bg-section-alt: var(--paper-2);
  --surface-card: var(--paper); --surface-card-hover: var(--white);
  --text-primary: var(--ink); --text-secondary: var(--gray-700); --text-muted: var(--gray-600); --text-faint: var(--gray-400);
  --border-strong: var(--ink); --border: var(--rule); --border-soft: var(--rule-soft);
  --accent: var(--signal);
  --bg-dark: var(--ink); --bg-dark-raised: var(--ink-2);
  --text-on-dark: var(--paper); --text-on-dark-secondary: var(--gray-200); --text-on-dark-muted: var(--gray-400);
  --border-on-dark: var(--ink-line);
  --bg-signal: var(--signal); --text-on-signal: var(--ink);

  --space-1: 4px; --space-2: 8px; --space-3: 10px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 32px; --space-8: 48px; --space-9: 72px; --space-10: 96px;
  --container: 1360px; --nav-h: 64px;
  --radius: 0px; --radius-dot: 50%;
  --shadow-none: none; --shadow-hard: 8px 8px 0 #ff4d12;
  --border-w: 1px; --border-w-rule: 2px;

  --font-display: "Instrument Serif", Georgia, serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg-page: var(--ink); --bg-section-alt: var(--ink-2);
  --surface-card: var(--ink-2); --surface-card-hover: var(--ink-line);
  --text-primary: var(--paper); --text-secondary: var(--gray-200); --text-muted: var(--gray-400); --text-faint: var(--gray-600);
  --border-strong: var(--paper); --border: var(--ink-line); --border-soft: var(--ink-line);
}
