/*
 * variables.css - Design Tokens
 * Color palette, typography, spacing
 */

/* ===== WEB FONTS ===== */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/AtkinsonHyperlegible-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('../fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ===== COLOR PALETTE ===== */

  /* Primary Colors (from plan) */
  --color-foundation: #1e3a5f;     /* Philosophy, principles, stable elements */
  --color-growth: #2a9d8f;         /* Capabilities, action, implementation */
  --color-impact: #e76f51;         /* Outcomes, metrics, results */
  --color-structure: #6c757d;      /* Connections, flow, neutral */

  /* Light Mode (default) */
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-elevated: #ffffff;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-text-inverse: #ffffff;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;

  /* Semantic Colors */
  --color-link: var(--color-foundation);
  --color-link-hover: var(--color-growth);
  --color-accent: var(--color-growth);
  --color-highlight: var(--color-impact);

  /* Status Colors */
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;

  /* ===== TYPOGRAPHY ===== */

  /* Font Families */
  --font-sans: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
               Consolas, "DejaVu Sans Mono", monospace;

  /* Font Sizes (based on 16px base) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px - h3 */
  --text-3xl: 2rem;        /* 32px - h2 */
  --text-4xl: 2.5rem;      /* 40px - h1 */

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

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ===== SPACING (8px grid) ===== */

  --space-1: 0.25rem;      /* 4px */
  --space-2: 0.5rem;       /* 8px */
  --space-3: 0.75rem;      /* 12px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  --space-24: 6rem;        /* 96px */

  /* ===== LAYOUT ===== */

  --max-width: 1200px;
  --gutter: var(--space-8);        /* 32px desktop */
  --gutter-mobile: var(--space-4); /* 16px mobile */

  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* ===== Z-INDEX SCALE ===== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}

/* ===== DARK MODE ===== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0d1117;
    --color-bg-alt: #161b22;
    --color-bg-elevated: #21262d;
    --color-text: #e6edf3;
    --color-text-muted: #8b949e;
    --color-text-inverse: #0d1117;
    --color-border: #30363d;
    --color-border-light: #21262d;

    /* Adjusted primary colors for dark mode contrast */
    --color-foundation: #4a7eb0;
    --color-growth: #3dbfad;
    --color-impact: #f0907a;
    --color-structure: #8b949e;

    /* Adjusted semantic colors */
    --color-link: var(--color-growth);
    --color-link-hover: #5fd4c4;
  }
}

/* Manual dark mode override */
[data-theme="dark"] {
  --color-bg: #0d1117;
  --color-bg-alt: #161b22;
  --color-bg-elevated: #21262d;
  --color-text: #e6edf3;
  --color-text-muted: #8b949e;
  --color-text-inverse: #0d1117;
  --color-border: #30363d;
  --color-border-light: #21262d;

  --color-foundation: #4a7eb0;
  --color-growth: #3dbfad;
  --color-impact: #f0907a;
  --color-structure: #8b949e;

  --color-link: var(--color-growth);
  --color-link-hover: #5fd4c4;
}

/* Manual light mode override */
[data-theme="light"] {
  --color-bg: #ffffff;
  --color-bg-alt: #f8f9fa;
  --color-bg-elevated: #ffffff;
  --color-text: #212529;
  --color-text-muted: #6c757d;
  --color-text-inverse: #ffffff;
  --color-border: #dee2e6;
  --color-border-light: #e9ecef;

  --color-foundation: #1e3a5f;
  --color-growth: #2a9d8f;
  --color-impact: #e76f51;
  --color-structure: #6c757d;

  --color-link: var(--color-foundation);
  --color-link-hover: var(--color-growth);
}