/**
 * Exponentially UI Color System
 * Version 2.0 - Professional Refined Palette
 *
 * Design Philosophy: Apple-inspired precision meets modern AI product design
 * Inspired by: Jony Ive's restraint, Stripe's accessibility, Linear's sophistication
 *
 * Key Principles:
 * - Restraint over excess (fewer, more intentional colors)
 * - Depth over brightness (rich, saturated tones not playful brights)
 * - Precision over approximation (exact values that work mathematically)
 * - Clarity over decoration (every color serves a purpose)
 */

:root {
  /* ========================================
     PRIMARY BRAND COLORS - REFINED TERRACOTTA
     Deeper, more authoritative than previous palette
     ======================================== */

  /* Base Terracotta Palette */
  --color-primary: #C84A2C;              /* Rich burnt orange - more saturated, less bright than #DD6948 */
  --color-primary-hover: #A63D24;         /* Darker hover for depth */
  --color-primary-active: #C84A2C;        /* Active state (same as primary) */

  --color-accent-strong: #8F2F1C;         /* Deep terracotta (almost brown) - powerful, grounding */
  --color-accent-light: #D96B4F;          /* Muted coral - used sparingly, not for backgrounds */

  /* ========================================
     SURFACES & BACKGROUNDS
     Warm grays inspired by MacBook aluminum, not pink tints
     ======================================== */

  --color-bg-surface: #FAFAF9;            /* Warmer than white but subtle - not pink */
  --color-bg-white: #FFFFFF;              /* Pure white - rare, strategic use */
  --color-bg-secondary: #F5F4F2;          /* Alternative surface, nested containers */
  --color-bg-hover: #EFEDEA;              /* Warm gray hover - not peach (#FFE6D9) */
  --color-bg-progress: #EFEDEA;           /* Progress bar backgrounds */

  /* ========================================
     TEXT COLORS
     Precise hierarchy like SF Pro, warm neutrals not pure black
     ======================================== */

  --color-text-primary: #18181B;          /* Near-black with warmth - high emphasis */
  --color-text-secondary: #52525B;        /* Medium gray - secondary content */
  --color-text-tertiary: #A1A1AA;         /* Light gray - de-emphasized */
  --color-text-white: #FFFFFF;            /* White on dark backgrounds */
  --color-text-muted: rgba(82, 82, 91, 0.6);  /* Muted secondary text */

  /* Legacy mappings for compatibility */
  --color-text-default: #18181B;          /* Maps to text-primary */
  --color-text-heading: #18181B;          /* Headings use primary text, not terracotta */

  /* ========================================
     BORDERS & DIVIDERS
     Sophisticated warm grays, clear hierarchy
     ======================================== */

  --color-border-light: #E4E4E7;          /* Subtle borders */
  --color-border-default: #D4D4D8;        /* Standard borders */
  --color-border-strong: #A1A1AA;         /* Emphasized borders */

  /* Legacy mappings */
  --color-border-soft: #E4E4E7;           /* Maps to border-light */
  --color-border-medium: #D4D4D8;         /* Maps to border-default */
  --color-border-gray: #A1A1AA;           /* Maps to border-strong */

  /* ========================================
     ICONS
     ======================================== */

  --color-icon-primary: #C84A2C;          /* Primary interactive icons */
  --color-icon-muted: rgba(143, 47, 28, 0.7);  /* Non-interactive icons */

  /* ========================================
     STATUS & SEMANTIC COLORS
     Professional, saturated colors - no pastels
     ======================================== */

  /* Success - Deep forest green (not orange!) */
  --color-success: #16A34A;               /* Strong green */
  --color-success-bg: #DCFCE7;            /* Subtle success background */
  --color-success-border: #BBF7D0;        /* Success border */

  /* Error - Pure red */
  --color-error: #DC2626;                 /* Clear danger signal */
  --color-error-bg: #FEE2E2;              /* Subtle error background */
  --color-error-border: #FECACA;          /* Error border */

  /* Warning - Amber (not yellow) */
  --color-warning: #D97706;               /* Serious amber warning */
  --color-warning-bg: #FEF3C7;            /* Subtle warning background */
  --color-warning-border: #FDE68A;        /* Warning border */

  /* Info - Deep blue */
  --color-info: #0369A1;                  /* Professional blue */
  --color-info-bg: #E0F2FE;               /* Subtle info background */
  --color-info-border: #BAE6FD;           /* Info border */

  /* ========================================
     SHADOWS & EFFECTS
     Apple-level precision, mathematically consistent
     ======================================== */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);

  /* Legacy mappings */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);   /* Maps to shadow-sm */
  --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.07); /* Maps to shadow-md */

  /* Focus rings */
  --focus-ring: 0 0 0 3px rgba(200, 74, 44, 0.15);  /* Terracotta glow */

  /* ========================================
     CHART & DATA VISUALIZATION
     6 distinct, accessible colors for dashboards
     ======================================== */

  --color-chart-1: #C84A2C;               /* Primary terracotta */
  --color-chart-2: #0369A1;               /* Deep blue */
  --color-chart-3: #16A34A;               /* Forest green */
  --color-chart-4: #D97706;               /* Amber */
  --color-chart-5: #7C3AED;               /* Deep purple */
  --color-chart-6: #DB2777;               /* Deep pink */

  /* Chart infrastructure */
  --color-chart-grid: #E4E4E7;            /* Grid lines */
  --color-chart-axis: #71717A;            /* Axis labels */
  --color-chart-primary: #C84A2C;         /* Primary chart color (legacy) */

  /* Progress bars */
  --color-progress-fill: #C84A2C;         /* Progress bar fill */
  --color-progress-bg: #EFEDEA;           /* Progress bar background */

  /* ========================================
     EXPERIMENT STATUS COLORS
     Refined from pastels to professional tones
     ======================================== */

  --color-experiment-designed: #E0E7FF;   /* Soft blue - not pink */
  --color-experiment-approved: #DBEAFE;   /* Light blue - approved */
  --color-experiment-live: #0369A1;       /* Deep blue - active/live */
  --color-experiment-stopped: #FEF3C7;    /* Light amber - stopped */
  --color-experiment-passed: #DCFCE7;     /* Light green - passed */
  --color-experiment-failed: #FEE2E2;     /* Light red - failed */
  --color-experiment-complete: #D1FAE5;   /* Soft green - complete */

  /* ========================================
     GRAYSCALE SYSTEM
     Professional warm grays (50-900) inspired by Tailwind/Radix
     ======================================== */

  --color-white: #FFFFFF;                 /* Pure white */
  --color-black: #000000;                 /* Pure black */
  --color-gray-50: #FAFAF9;               /* Lightest gray - subtle backgrounds */
  --color-gray-100: #F5F4F2;              /* Very light gray - surfaces */
  --color-gray-200: #E8E6E3;              /* Light gray - subtle borders */
  --color-gray-300: #D4D1CC;              /* Medium-light gray - borders */
  --color-gray-400: #A8A29E;              /* Medium gray - disabled, muted */
  --color-gray-500: #78716C;              /* Mid gray - secondary text */
  --color-gray-600: #57534E;              /* Dark gray - body text alternative */
  --color-gray-700: #44403C;              /* Darker gray - emphasis */
  --color-gray-800: #292524;              /* Very dark gray - headings */
  --color-gray-900: #1C1917;              /* Nearly black - primary text */

  /* ========================================
     DISABLED STATES
     Always gray, never orange
     ======================================== */

  --color-primary-disabled: #D4D4D8;      /* Neutral gray for disabled buttons */
  --color-disabled-text: #A1A1AA;         /* Disabled text */
  --color-disabled-bg: #F5F4F2;           /* Disabled backgrounds */

  /* ========================================
     LEGACY MAPPINGS
     For backwards compatibility with existing code
     ======================================== */

  /* Old purple to new terracotta */
  --legacy-purple-primary: var(--color-primary);
  --legacy-purple-dark: var(--color-accent-strong);
  --legacy-purple-light: var(--color-accent-light);
  --legacy-purple-bg-light: var(--color-bg-surface);
  --legacy-purple-bg-lighter: var(--color-bg-hover);
}

/**
 * ========================================
 * USAGE GUIDELINES
 * ========================================
 *
 * TIER 1: Foundation (90% of UI)
 * - Use warm grays for backgrounds, text, borders
 * - Like iOS settings screens - minimal color
 * - Examples: #FAFAF9 surfaces, #18181B text
 *
 * TIER 2: Brand Accents (8% of UI)
 * - Terracotta on buttons, links, active states
 * - Strategic placement, not everywhere
 * - Examples: Primary buttons, active nav items
 *
 * TIER 3: Semantics (2% of UI)
 * - Status colors only when needed
 * - Charts, alerts, notifications
 * - Examples: Success banners, error messages
 *
 * ========================================
 * TYPOGRAPHY
 * ========================================
 * - Headlines: Geist Medium, var(--color-text-primary) #18181B
 * - Body text: Geist Regular, var(--color-text-primary) #18181B
 * - Secondary: Geist Regular, var(--color-text-secondary) #52525B
 * - Muted: Geist Regular, var(--color-text-tertiary) #A1A1AA
 *
 * ========================================
 * BUTTONS
 * ========================================
 * - Primary: bg var(--color-primary), text white
 * - Primary hover: bg var(--color-primary-hover)
 * - Disabled: bg var(--color-primary-disabled), cursor not-allowed
 * - Secondary: bg transparent, border var(--color-border-default)
 *
 * ========================================
 * CARDS & SURFACES
 * ========================================
 * - Main background: var(--color-bg-surface) #FAFAF9
 * - Card background: var(--color-bg-white) #FFFFFF
 * - Card border: var(--color-border-light) #E4E4E7
 * - Card shadow: var(--shadow-sm)
 *
 * ========================================
 * NAVIGATION
 * ========================================
 * - Default: bg transparent, text var(--color-text-primary)
 * - Hover: bg var(--color-bg-hover), text var(--color-text-primary)
 * - Active: bg var(--color-primary), text var(--color-text-white)
 *
 * ========================================
 * STATUS INDICATORS
 * ========================================
 * - Success: var(--color-success) #16A34A (green, not orange!)
 * - Error: var(--color-error) #DC2626 (red)
 * - Warning: var(--color-warning) #D97706 (amber)
 * - Info: var(--color-info) #0369A1 (blue)
 *
 * ========================================
 * ACCESSIBILITY
 * ========================================
 * - All colors pass WCAG AA (4.5:1 minimum)
 * - Text contrast verified on all backgrounds
 * - Focus indicators visible and distinct
 * - Color is never the only indicator (use icons/labels)
 *
 * ========================================
 * DESIGN PHILOSOPHY
 * ========================================
 * "Simplicity is the ultimate sophistication" - Jony Ive
 *
 * This palette embodies:
 * - Restraint over excess (fewer colors, more intentional)
 * - Depth over brightness (rich tones, not playful)
 * - Precision over approximation (exact values)
 * - Clarity over decoration (purpose-driven)
 */