/* Design Tokens - CSS Custom Properties
 * Source: Distill.pub design principles
 * All theme values defined here for maintainability and future theming
 */

:root {
  /* Typography - Font Families */
  /* Modern sans-serif for everything - Distill/Linear inspired */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", monospace;

  /* Typography - Font Sizes */
  /* Reduced h1 for better proportion - mobile first */
  --font-size-base: 18px;
  --font-size-small: 0.875rem;
  --font-size-h1: 2rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;

  /* Typography - Line Heights */
  --line-height-body: 1.6;
  --line-height-heading: 1.3;
  --line-height-tight: 1.2;

  /* Colors - Text */
  --color-text: rgba(0, 0, 0, 0.87);
  --color-text-secondary: rgba(0, 0, 0, 0.6);
  --color-text-muted: rgba(0, 0, 0, 0.4);

  /* Colors - Background */
  --color-background: #ffffff;
  --color-page-bg: #e4e8f4;
  --color-background-subtle: rgba(0, 0, 0, 0.02);
  --color-background-code: rgba(0, 0, 0, 0.04);

  /* Colors - Interactive */
  /* Periwinkle/indigo accent - inspired by background illustration */
  --color-link: #5b6abf;
  --color-link-hover: #4a58a0;
  --color-link-visited: #7b6b8e;
  --color-logo: #5e4a9e;

  /* Colors - Tooltips */
  --color-tooltip-bg: #333;
  --color-tooltip-text: #fff;

  /* Colors - Borders */
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);

  /* Spacing Scale */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-section: 4rem;

  /* Layout */
  --content-width: 65ch;
  --content-width-wide: 80ch;
  --container-padding: 1.5rem;
  --edge-padding: 1.25rem;
  --container-max-width: 1200px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;

  /* Colors - Syntax Highlighting (Prism) */
  --prism-comment: rgba(0, 0, 0, 0.4);
  --prism-punctuation: rgba(0, 0, 0, 0.6);
  --prism-keyword: #5b6abf;
  --prism-string: #22863a;
  --prism-number: #6f42c1;
  --prism-function: #4a7fc7;
  --prism-operator: rgba(0, 0, 0, 0.6);
  --prism-class: #4a7fc7;
  --prism-attr-name: #6f42c1;
  --prism-deleted: #b31d28;
  --prism-deleted-bg: rgba(179, 29, 40, 0.08);
  --prism-inserted: #22863a;
  --prism-inserted-bg: rgba(34, 134, 58, 0.08);
  --prism-highlight-bg: rgba(91, 106, 191, 0.08);

  /* Colors - Selection */
  --color-selection: rgba(91, 106, 191, 0.2);

  /* Colors - Decorative */
  --color-header-gradient: rgba(139, 159, 212, 0.14);
  --color-hero-gradient-start: rgba(139, 159, 212, 0.15);
  --color-hero-gradient-end: rgba(139, 159, 212, 0.15);
  --color-page-gradient-start: rgba(139, 159, 212, 0.25);
  --color-page-gradient-end: rgba(139, 159, 212, 0.25);
  --color-sidebar-shadow: rgba(0, 0, 0, 0.1);
  --color-btn-secondary-hover-bg: rgba(91, 106, 191, 0.08);
  --color-sidebar-hover-bg: rgba(91, 106, 191, 0.08);
  --color-sidebar-active-bg: rgba(91, 106, 191, 0.14);
  --color-feature-card-shadow: rgba(0, 0, 0, 0.04);
}

/* Dark theme - auto-detection via system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Text */
    --color-text: rgba(255, 255, 255, 0.87);
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-muted: rgba(255, 255, 255, 0.4);

    /* Background */
    --color-background: #1a1a2e;
    --color-page-bg: #1a1a2e;
    --color-background-subtle: rgba(255, 255, 255, 0.04);
    --color-background-code: rgba(255, 255, 255, 0.08);

    /* Interactive */
    --color-link: #a0aee8;
    --color-link-hover: #b8c4f0;
    --color-link-visited: #b0a0c8;
    --color-logo: #b8a0e0;
    --color-btn-primary: #6b5fbf;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.2);

    /* Tooltips */
    --color-tooltip-bg: #2a2a3e;
    --color-tooltip-text: #e0e0e0;

    /* Prism (dark palette) */
    --prism-comment: rgba(255, 255, 255, 0.4);
    --prism-punctuation: rgba(255, 255, 255, 0.5);
    --prism-keyword: #9aaae0;
    --prism-string: #98c379;
    --prism-number: #d19a66;
    --prism-function: #dcdcaa;
    --prism-operator: rgba(255, 255, 255, 0.5);
    --prism-class: #4ec9b0;
    --prism-attr-name: #c678dd;
    --prism-deleted: #e06c75;
    --prism-deleted-bg: rgba(224, 108, 117, 0.15);
    --prism-inserted: #98c379;
    --prism-inserted-bg: rgba(152, 195, 121, 0.15);
    --prism-highlight-bg: rgba(160, 174, 232, 0.12);

    /* Selection */
    --color-selection: rgba(160, 174, 232, 0.3);

    /* Decorative */
    --color-header-gradient: rgba(160, 174, 232, 0.08);
    --color-hero-gradient-start: rgba(70, 60, 130, 0.20);
    --color-hero-gradient-end: rgba(100, 55, 75, 0.12);
    --color-page-gradient-start: rgba(70, 60, 130, 0.30);
    --color-page-gradient-end: rgba(100, 55, 75, 0.20);
    --color-sidebar-shadow: rgba(0, 0, 0, 0.3);
    --color-btn-secondary-hover-bg: rgba(160, 174, 232, 0.12);
    --color-sidebar-hover-bg: rgba(160, 174, 232, 0.10);
    --color-sidebar-active-bg: rgba(160, 174, 232, 0.18);
    --color-feature-card-shadow: rgba(0, 0, 0, 0.2);
  }
}

/* Dark theme - manual override via data attribute */
[data-theme="dark"] {
  /* Text */
  --color-text: rgba(255, 255, 255, 0.87);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.4);

  /* Background */
  --color-background: #1a1a2e;
  --color-page-bg: #1a1a2e;
  --color-background-subtle: rgba(255, 255, 255, 0.04);
  --color-background-code: rgba(255, 255, 255, 0.08);

  /* Interactive */
  --color-link: #a0aee8;
  --color-link-hover: #b8c4f0;
  --color-link-visited: #b0a0c8;
  --color-logo: #b8a0e0;
  --color-btn-primary: #6b5fbf;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);

  /* Tooltips */
  --color-tooltip-bg: #2a2a3e;
  --color-tooltip-text: #e0e0e0;

  /* Prism (dark palette) */
  --prism-comment: rgba(255, 255, 255, 0.4);
  --prism-punctuation: rgba(255, 255, 255, 0.5);
  --prism-keyword: #9aaae0;
  --prism-string: #98c379;
  --prism-number: #d19a66;
  --prism-function: #dcdcaa;
  --prism-operator: rgba(255, 255, 255, 0.5);
  --prism-class: #4ec9b0;
  --prism-attr-name: #c678dd;
  --prism-deleted: #e06c75;
  --prism-deleted-bg: rgba(224, 108, 117, 0.15);
  --prism-inserted: #98c379;
  --prism-inserted-bg: rgba(152, 195, 121, 0.15);
  --prism-highlight-bg: rgba(160, 174, 232, 0.12);

  /* Selection */
  --color-selection: rgba(160, 174, 232, 0.3);

  /* Decorative */
  --color-header-gradient: rgba(160, 174, 232, 0.08);
  --color-hero-gradient-start: rgba(70, 60, 130, 0.20);
  --color-hero-gradient-end: rgba(100, 55, 75, 0.12);
  --color-page-gradient-start: rgba(70, 60, 130, 0.30);
  --color-page-gradient-end: rgba(100, 55, 75, 0.20);
  --color-sidebar-shadow: rgba(0, 0, 0, 0.3);
  --color-btn-secondary-hover-bg: rgba(160, 174, 232, 0.12);
  --color-sidebar-hover-bg: rgba(160, 174, 232, 0.10);
  --color-sidebar-active-bg: rgba(160, 174, 232, 0.18);
  --color-feature-card-shadow: rgba(0, 0, 0, 0.2);
}