/**
 * OTE Color Token System
 * Centralized color definitions for the entire theme
 * 
 * This file defines all colors used throughout the theme in a single location.
 * Colors are organized in three layers:
 * 1. Primitive tokens: Raw color values
 * 2. Semantic tokens: Purpose-based color assignments
 * 3. Component tokens: Specific component color mappings
 */

:root {
  /* ==========================================================================
     PRIMITIVE COLOR TOKENS
     Raw color values - the single source of truth
     ========================================================================== */
  
  /* Green palette (Brand colors) */
  --color-green-900: #1a3624;  /* Darkest green */
  --color-green-800: #1e4430;  /* Very dark green */
  --color-green-700: #2d5f3f;  /* Primary brand green */
  --color-green-600: #4a7c59;  /* Secondary brand green */
  --color-green-500: #5e9970;  /* Medium green */
  --color-green-400: #86a58e;  /* Light green */
  --color-green-300: #a8c4b2;  /* Very light green */
  --color-green-200: #c8ddd0;  /* Pale green */
  --color-green-100: #e8f3ec;  /* Lightest green */
  --color-green-50:  #f5faf7;  /* Near white green */
  
  /* Blue palette (Accent colors) */
  --color-blue-700: #0369a1;  /* Dark blue */
  --color-blue-600: #0284c7;  /* Medium dark blue */
  --color-blue-500: #0ea5e9;  /* Primary accent blue */
  --color-blue-400: #38bdf8;  /* Light blue */
  --color-blue-300: #7dd3fc;  /* Very light blue */
  --color-blue-200: #bae6fd;  /* Pale blue */
  --color-blue-100: #e0f2fe;  /* Lightest blue */
  
  /* Slate palette (Neutrals) */
  --color-slate-950: #020617;  /* Near black */
  --color-slate-900: #0f172a;  /* Darkest slate */
  --color-slate-800: #1e293b;  /* Very dark slate */
  --color-slate-700: #334155;  /* Dark slate */
  --color-slate-600: #475569;  /* Medium dark slate */
  --color-slate-500: #64748b;  /* Medium slate */
  --color-slate-400: #94a3b8;  /* Light slate */
  --color-slate-300: #cbd5e1;  /* Very light slate */
  --color-slate-200: #e2e8f0;  /* Pale slate */
  --color-slate-100: #f1f5f9;  /* Lightest slate */
  --color-slate-50:  #f8fafc;  /* Near white slate */
  
  /* Utility colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-success: #35C291;
  --color-warning: #E7A83A;
  --color-danger: #F06A5E;
  --color-info: #3B82F6;
  
  /* ==========================================================================
     SEMANTIC COLOR TOKENS - LIGHT MODE
     Purpose-based color assignments
     ========================================================================== */
  
  /* Brand colors */
  --brand: var(--color-green-700);
  --brand-hover: var(--color-green-600);
  --brand-active: var(--color-green-800);
  --brand-subtle: var(--color-green-100);
  --brand-muted: var(--color-green-50);
  
  /* Accent colors */
  --accent: var(--color-blue-500);
  --accent-hover: var(--color-blue-600);
  --accent-subtle: var(--color-blue-100);
  
  /* Text colors */
  --text: var(--color-slate-800);
  --text-secondary: var(--color-slate-500);
  --text-tertiary: var(--color-slate-400);
  --text-disabled: var(--color-slate-300);
  --text-inverse: var(--color-white);
  
  /* Background colors */
  --bg: var(--color-white);
  --bg-subtle: var(--color-slate-50);
  --bg-muted: var(--color-slate-100);
  --bg-elevated: var(--color-white);
  --bg-overlay: rgba(0, 0, 0, 0.5);
  
  /* Surface colors */
  --surface: var(--color-white);
  --surface-hover: var(--color-slate-50);
  --surface-active: var(--color-slate-100);
  --surface-disabled: var(--color-slate-50);
  
  /* Border colors */
  --border: var(--color-slate-200);
  --border-hover: var(--color-slate-300);
  --border-focus: var(--brand);
  --border-disabled: var(--color-slate-100);
  
  /* State colors */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --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);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--brand), transparent 70%);
  
  /* Legacy elevation (for backward compatibility) */
  --elev-1: var(--shadow-md);
  --elev-2: var(--shadow-lg);
  --elev-3: var(--shadow-xl);
}

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

[data-theme="dark"],
.dark-mode {
  /* Brand colors (adjusted for dark mode) */
  --brand: var(--color-green-600);
  --brand-hover: var(--color-green-500);
  --brand-active: var(--color-green-700);
  --brand-subtle: var(--color-green-900);
  --brand-muted: var(--color-slate-800);
  
  /* Accent colors */
  --accent: var(--color-blue-400);
  --accent-hover: var(--color-blue-300);
  --accent-subtle: var(--color-slate-800);
  
  /* Text colors */
  --text: var(--color-slate-100);
  --text-secondary: var(--color-slate-400);
  --text-tertiary: var(--color-slate-500);
  --text-disabled: var(--color-slate-600);
  --text-inverse: var(--color-slate-900);
  
  /* Background colors */
  --bg: var(--color-slate-900);
  --bg-subtle: var(--color-slate-800);
  --bg-muted: var(--color-slate-800);
  --bg-elevated: var(--color-slate-800);
  --bg-overlay: rgba(0, 0, 0, 0.7);
  
  /* Surface colors */
  --surface: var(--color-slate-800);
  --surface-hover: var(--color-slate-700);
  --surface-active: var(--color-slate-600);
  --surface-disabled: var(--color-slate-800);
  
  /* Border colors */
  --border: var(--color-slate-700);
  --border-hover: var(--color-slate-600);
  --border-focus: var(--brand);
  --border-disabled: var(--color-slate-800);
  
  /* Shadows (enhanced for dark mode) */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.1);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3);
}

/* ==========================================================================
   COMPONENT-SPECIFIC TOKENS
   Map semantic tokens to specific component use cases
   ========================================================================== */

:root {
  /* Buttons */
  --button-primary-bg: linear-gradient(180deg, color-mix(in oklab, var(--brand), white 8%), var(--brand));
  --button-primary-bg-hover: var(--brand-hover);
  --button-primary-text: var(--text-inverse);
  --button-secondary-bg: transparent;
  --button-secondary-bg-hover: var(--bg-muted);
  --button-secondary-text: var(--text);
  --button-secondary-border: var(--border);
  
  /* Forms */
  --input-bg: var(--surface);
  --input-border: var(--border);
  --input-border-focus: var(--border-focus);
  --input-text: var(--text);
  --input-placeholder: var(--text-tertiary);
  
  /* Cards */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-shadow: var(--shadow);
  
  /* Navigation */
  --nav-bg: var(--bg-elevated);
  --nav-link: var(--text-secondary);
  --nav-link-hover: var(--text);
  --nav-link-active: var(--brand);
  
  /* Badges */
  --badge-bg: var(--brand-subtle);
  --badge-text: var(--brand);
  --badge-border: var(--brand);
  
  /* Tooltips */
  --tooltip-bg: var(--color-slate-900);
  --tooltip-text: var(--color-white);
  
  /* Modals */
  --modal-bg: var(--surface);
  --modal-overlay: var(--bg-overlay);
  --modal-border: var(--border);
  
  /* Tables */
  --table-bg: var(--surface);
  --table-bg-hover: var(--surface-hover);
  --table-border: var(--border);
  --table-header-bg: var(--bg-subtle);
  
  /* Alerts */
  --alert-success-bg: color-mix(in oklab, var(--success), transparent 90%);
  --alert-success-border: var(--success);
  --alert-success-text: color-mix(in oklab, var(--success), black 20%);
  
  --alert-warning-bg: color-mix(in oklab, var(--warning), transparent 90%);
  --alert-warning-border: var(--warning);
  --alert-warning-text: color-mix(in oklab, var(--warning), black 20%);
  
  --alert-danger-bg: color-mix(in oklab, var(--danger), transparent 90%);
  --alert-danger-border: var(--danger);
  --alert-danger-text: color-mix(in oklab, var(--danger), black 20%);
  
  --alert-info-bg: color-mix(in oklab, var(--info), transparent 90%);
  --alert-info-border: var(--info);
  --alert-info-text: color-mix(in oklab, var(--info), black 20%);
}

/* ==========================================================================
   LEGACY VARIABLE MAPPINGS
   For backward compatibility - these should be phased out over time
   ========================================================================== */

:root {
  /* Map old variable names to new system */
  --text-sec: var(--text-secondary);
  --bg-elev: var(--bg-elevated);
  --muted: var(--bg-muted);
  --brand-2: var(--brand-hover);
  --accent-blue: var(--accent);
  
  /* Scribble colors for decorative elements */
  --scribble-stroke: var(--brand);
  --scribble-stroke-2: var(--brand-hover);
}