/**
 * 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 */
  
  /* 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)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Uncomment and adjust when implementing dark mode */
    /* --color-bg: #1a1a1a; */
    /* --color-bg-card: #2d2d2d; */
    /* --color-text: #f5f5f5; */
  }
}