/* ==========================================================================
   Design Tokens — Raymond Yee Style Guide
   Derived from 83 A/B comparisons across typography, color, layout, code themes.
   ========================================================================== */

/* Token Set 1: Personal Brand (Light Mode) — Teal & Ember */
:root {
  /* Typography */
  --font-heading: 'Merriweather', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-code: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Font Sizes */
  --font-size-h1: 2rem;
  --font-size-h2: 1.4rem;
  --font-size-h3: 1.1rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-code: 0.875rem;

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line Height */
  --line-height-body: 1.7;
  --line-height-heading: 1.25;

  /* Spacing */
  --space-section: 2rem;
  --space-paragraph: 0.9rem;
  --space-page-x: 2rem;
  --space-page-y: 1.5rem;
  --content-max-width: 720px;

  /* Colors: Teal & Ember */
  --color-primary: #1a7a7a;
  --color-secondary: #5bb5b5;
  --color-accent: #d17a5a;
  --color-accent-text: #b8624a;  /* Darkened for 4.5:1 contrast on light bg */
  --color-accent-bg: #d17a5a;    /* Original for backgrounds with dark text */
  --color-bg: #fafcfc;
  --color-surface: #ffffff;
  --color-text: #2d4040;
  --color-text-muted: #5a7a7a;
  --color-border: #e0eded;
  --color-highlight: #fdf8e8;
  --color-dark: #1a2f2f;
  --color-light: #e6f5f5;

  /* Code: Paper Light */
  --code-bg: #f8f5f0;
  --code-fg: #3c3836;
  --code-keyword: #9d0006;
  --code-string: #427b58;
  --code-function: #076678;
  --code-number: #8f3f71;
  --code-comment: #928374;
  --code-inline-bg: #f0ece4;
  --code-inline-border: #e0dbd2;

  /* Components */
  --radius-small: 4px;
  --radius-medium: 6px;
  --radius-large: 8px;
  --card-border: 1px solid var(--color-border);
  --card-shadow: none;
  --card-padding: 1.2rem;
  --bq-border: 3px solid var(--color-secondary);
  --bq-bg: var(--color-light);
  --bq-padding: 0.8rem 1.2rem;
  --divider: 1px solid var(--color-border);

  /* Transitions */
  --transition-duration: 200ms;
  --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Token Set 2: Documentation variant */
[data-context="docs"] {
  --font-heading: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-size-h1: 1.9rem;
  --font-size-body: 0.95rem;
  --font-size-code: 0.82rem;
  --content-max-width: 740px;

  /* Colors: Deep Ocean */
  --color-primary: #1a5276;
  --color-secondary: #2e86c1;
  --color-accent: #d4726a;
  --color-accent-text: #b8564e;
  --color-accent-bg: #d4726a;
  --color-bg: #fafcfe;
  --color-text: #1c2833;
  --color-text-muted: #546e7a;
  --color-highlight: #fef9e7;
  --color-dark: #1c2833;
  --color-light: #eaf2f8;
}

/* Token Set 3: Dark Mode */
[data-theme="dark"] {
  --color-primary: #5bb5b5;
  --color-secondary: #2e86c1;
  --color-accent: #d4726a;
  --color-accent-text: #d4726a;
  --color-accent-bg: #d4726a;
  --color-bg: #1c2833;
  --color-surface: #243342;
  --color-text: #d5dde5;
  --color-text-muted: #8a9baa;
  --color-border: #2e4050;
  --color-highlight: #3a3520;
  --color-dark: #141e28;
  --color-light: #2e4050;

  /* Code: Ocean Dark */
  --code-bg: #1c2833;
  --code-fg: #d5dde5;
  --code-keyword: #6ab0f3;
  --code-string: #d4726a;
  --code-function: #aed6f1;
  --code-number: #e8c87a;
  --code-comment: #7a8e9a; /* Lightened from #546e7a for AA compliance */
  --code-inline-bg: #243342;
  --code-inline-border: #2e4050;
}