/**
 * PhonoLogic Design System - CSS Variables
 * =========================================
 * 
 * Single source of truth for all design tokens.
 * Import this file FIRST in all HTML pages.
 * 
 * @version 1.0.0
 * @see Brand palette memory for authoritative colors
 */

:root {
  /* ==========================================================================
     Colors - Brand Palette (AUTHORITATIVE)
     DO NOT USE PURPLE - it is NOT on-brand for PhonoLogic
     ========================================================================== */
  
  /* Primary Colors */
  --color-primary: #ff8a3d;           /* Primary orange - buttons, accents */
  --color-primary-hover: #e67a35;     /* Darker orange for hover states */
  --color-primary-light: #fff7f2;     /* Light orange tint */
  --color-brand: #dc9435;             /* Brand orange - secondary buttons */
  --color-brand-hover: #c4842f;       /* Darker brand for hover */
  
  /* Backgrounds */
  --color-bg: #faf8f6;                /* Page background - light cream */
  --color-bg-card: #ffffff;           /* Card/panel backgrounds */
  --color-bg-subtle: #f3f4f6;         /* Subtle background for sections */
  --color-bg-cream: #fff7f2;          /* Cream panels (left panel) */
  --color-bg-muted: #f8fafc;          /* Very light gray */
  
  /* Text Colors */
  --color-text: #1f2937;              /* Primary text - dark gray */
  --color-text-secondary: #374151;    /* Secondary text */
  --color-text-muted: #6b7280;        /* Muted/helper text */
  --color-text-placeholder: #9ca3af;  /* Placeholder text */
  --color-text-inverse: #ffffff;      /* Text on dark backgrounds */
  
  /* Complementary Palette — "Literate Warmth" (homepage redesign v7.20) */
  --color-navy: #354B5E;              /* Section backgrounds, editorial headings */
  --color-navy-light: #4A6378;        /* Navy hover/lighter variant */
  --color-navy-dark: #273845;         /* Deeper navy for contrast */
  --color-teal: #5B8F8A;             /* Secondary accents, icon backgrounds */
  --color-teal-light: #7AABA6;       /* Teal hover/lighter */
  --color-teal-muted: #A8CBC7;       /* Very soft teal for backgrounds */
  --color-sienna: #B8654A;           /* Decorative SVG fills, hover states */
  --color-sienna-light: #D4886E;     /* Sienna lighter variant */
  --color-sand: #F0E6D8;            /* Alternate backgrounds, card fills */
  --color-sand-dark: #E2D4C2;       /* Slightly deeper sand */
  --color-gold-pale: #FDF5E9;       /* Hero gradient overlay */

  /* Homepage gradient tokens */
  --gradient-hero: linear-gradient(135deg, #FDF5E9 0%, #fff7f2 50%, #F0E6D8 100%);
  --gradient-section-navy: linear-gradient(180deg, #354B5E 0%, #2C3E50 100%);
  --gradient-section-warm: linear-gradient(180deg, #F0E6D8 0%, #FDF5E9 100%);
  --gradient-section-teal: linear-gradient(135deg, #f0f7f6 0%, #e8f0ef 100%);

  /* Homepage typography scale (editorial) */
  --font-size-display: 52px;         /* Hero headline */
  --font-size-display-sm: 36px;      /* Mobile hero headline */
  --font-size-heading: 36px;         /* Section headings */
  --font-size-subheading: 20px;      /* Section subtitles */
  --font-size-caption: 12px;         /* Small labels, badges */

  /* Homepage depth shadows */
  --shadow-elevated: 0 8px 30px rgba(53, 75, 94, 0.12);
  --shadow-soft: 0 2px 16px rgba(53, 75, 94, 0.06);
  --shadow-navy: 0 4px 20px rgba(53, 75, 94, 0.15);

  /* Borders */
  --color-border: #e5e7eb;            /* Default border */
  --color-border-light: #f3f4f6;      /* Light border */
  --color-border-focus: #ff8a3d;      /* Focus ring color */
  --color-border-cream: #ffd9c9;      /* Cream panel border */
  
  /* Semantic Colors */
  --color-success: #10b981;           /* Success/completed states */
  --color-success-light: #d1fae5;     /* Success background */
  --color-success-dark: #059669;      /* Success text on light bg */
  --color-success-border: #86efac;    /* Success border */
  --color-success-text: #166534;      /* Success text */
  
  --color-warning: #f59e0b;           /* Warning states */
  --color-warning-light: #fef3c7;     /* Warning background */
  --color-warning-dark: #d97706;      /* Warning text */
  
  --color-error: #dc2626;             /* Error states */
  --color-error-light: #fee2e2;       /* Error background */
  --color-error-dark: #b91c1c;        /* Error text */
  
  /* ==========================================================================
     Typography
     ========================================================================== */
  
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 15px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 21px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  
  /* ==========================================================================
     Spacing Scale (based on 4px grid)
     ========================================================================== */
  
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-14: 28px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 48px;
  
  /* ==========================================================================
     Border Radius
     ========================================================================== */
  
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 20px;
  --radius-full: 9999px;
  
  /* ==========================================================================
     Shadows
     ========================================================================== */
  
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 4px 24px rgba(0, 0, 0, 0.08);
  
  /* Brand shadows (orange tinted) */
  --shadow-primary: 0 4px 14px rgba(255, 138, 61, 0.3);
  --shadow-primary-hover: 0 6px 20px rgba(255, 138, 61, 0.4);
  --shadow-primary-sm: 0 4px 12px rgba(255, 138, 61, 0.15);
  
  /* ==========================================================================
     Transitions
     ========================================================================== */
  
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.35s ease;
  
  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-modal: 100;
  --z-popover: 200;
  --z-tooltip: 300;
  --z-header: 1000;
  --z-loading: 9999;
  
  /* ==========================================================================
     Layout
     ========================================================================== */
  
  --container-max: 900px;
  --card-max-width: 480px;
  --split-left-width: 40%;
  --split-right-width: 60%;
  
  /* Breakpoints (for reference - use in media queries) */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 900px;
  --breakpoint-xl: 1200px;
}

/* ==========================================================================
   Dark Mode Support (Future)
   ========================================================================== */

/* ==========================================================================
   Dark Mode — toggled via [data-theme="dark"] on <html>
   ========================================================================== */

[data-theme="dark"] {
  --color-primary: #ff9f5a;
  --color-primary-hover: #ffb07a;
  --color-primary-light: #2a2018;
  --color-brand: #e5a040;
  --color-brand-hover: #d0903a;

  --color-bg: #121212;
  --color-bg-card: #1e1e1e;
  --color-bg-subtle: #2a2a2a;
  --color-bg-cream: #1a1510;
  --color-bg-muted: #1a1a1a;

  --color-text: #e5e5e5;
  --color-text-secondary: #d1d1d1;
  --color-text-muted: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-text-inverse: #1f2937;

  --color-border: #333333;
  --color-border-light: #2a2a2a;
  --color-border-focus: #ff9f5a;
  --color-border-cream: #3d2f1f;

  --color-success: #34d399;
  --color-success-light: #1a2e28;
  --color-success-dark: #6ee7b7;
  --color-warning: #fbbf24;
  --color-warning-light: #2e2510;
  --color-error: #f87171;
  --color-error-light: #2e1a1a;

  /* Complementary Palette — dark mode */
  --color-navy: #4A6378;
  --color-navy-light: #5B7A92;
  --color-navy-dark: #3A5568;
  --color-teal: #7AABA6;
  --color-teal-light: #8FC0BB;
  --color-teal-muted: #3A5553;
  --color-sienna: #D4886E;
  --color-sienna-light: #E0A08A;
  --color-sand: #2A2420;
  --color-sand-dark: #231E1A;
  --color-gold-pale: #1E1A14;

  --gradient-hero: linear-gradient(135deg, #1E1A14 0%, #1a1510 50%, #2A2420 100%);
  --gradient-section-navy: linear-gradient(180deg, #1a2530 0%, #162028 100%);
  --gradient-section-warm: linear-gradient(180deg, #2A2420 0%, #1E1A14 100%);
  --gradient-section-teal: linear-gradient(135deg, #1a2524 0%, #182220 100%);

  --shadow-elevated: 0 8px 30px rgba(0, 0, 0, 0.4);
  --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.3);
  --shadow-navy: 0 4px 20px rgba(0, 0, 0, 0.4);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] .settings-section,
[data-theme="dark"] .gh-container,
[data-theme="dark"] #globalHeader {
  background: var(--color-bg-card);
  border-color: var(--color-border);
}

[data-theme="dark"] .settings-item {
  border-color: var(--color-border);
}

[data-theme="dark"] .settings-item-value {
  background: var(--color-bg-subtle);
  color: var(--color-text);
}

[data-theme="dark"] .settings-btn-secondary {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-border);
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-overlay .modal-content {
  background: var(--color-bg-card);
  color: var(--color-text);
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--color-bg-subtle);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* ==========================================================================
   High-Contrast Color Blind Mode — toggled via [data-a11y="high-contrast"]
   Replaces red/green semantic colors with blue/orange for deuteranopia
   ========================================================================== */

[data-a11y="high-contrast"] {
  /* Success: green → blue (safe for deuteranopia/protanopia) */
  --color-success: #2563eb;
  --color-success-light: #dbeafe;
  --color-success-dark: #1d4ed8;
  --color-success-border: #93c5fd;
  --color-success-text: #1e3a5f;

  /* Error: keep red but darken for contrast */
  --color-error: #b91c1c;
  --color-error-light: #fee2e2;
  --color-error-dark: #991b1b;

  /* Warning: orange stays (already color-blind safe) */
  --color-warning: #ea580c;
  --color-warning-light: #fff7ed;
  --color-warning-dark: #c2410c;

  /* Story highlighting tokens — used by shared-story-styles.css */
  --a11y-good-bg: #dbeafe;
  --a11y-good-border: #2563eb;
  --a11y-good-text: #1e40af;
  --a11y-struggled-bg: #fce7f3;
  --a11y-struggled-border: #be185d;
  --a11y-struggled-text: #9d174d;
  --a11y-disallowed: #9d174d;
  --a11y-focus-underline: #dc9435;
}

[data-a11y="high-contrast"] .referral-status.converted,
[data-a11y="high-contrast"] .status-success {
  color: #2563eb;
  background: #dbeafe;
}

[data-a11y="high-contrast"] .referral-status.clicked,
[data-a11y="high-contrast"] .status-warning {
  color: #ea580c;
  background: #fff7ed;
}