/*
 * Design System Token Hierarchy
 *
 * 3-tier structure:
 * 1. Foundation Tokens - Primitive values (colors, spacing, fonts)
 * 2. Core Tokens - Semantic meaning (bg-primary, action-primary)
 * 3. Component Tokens - Specific component usage (btn-primary-bg)
 */

:root {
  /* =====================================================
   * FOUNDATION TOKENS (Primitives)
   * Raw values - never use directly in components
   * ===================================================== */

  /* Color Palette - Slate */
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-slate-200: #e2e8f0;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;

  /* Color Palette - Blue */
  --color-blue-600: #2563eb;
  --color-blue-500: #3b82f6;
  --color-blue-400: #60a5fa;
  --color-blue-100: rgba(59, 130, 246, 0.2);

  /* Color Palette - Green */
  --color-green-600: #16a34a;
  --color-green-500: #22c55e;
  --color-green-400: #4ade80;
  --color-green-100: rgba(34, 197, 94, 0.2);

  /* Color Palette - Yellow */
  --color-yellow-600: #d97706;
  --color-yellow-500: #f59e0b;
  --color-yellow-400: #fbbf24;
  --color-yellow-100: rgba(245, 158, 11, 0.2);

  /* Color Palette - Red */
  --color-red-600: #dc2626;
  --color-red-500: #ef4444;
  --color-red-400: #f87171;
  --color-red-100: rgba(239, 68, 68, 0.2);

  /* Color Palette - Purple (AI states) */
  --color-purple-600: #7c3aed;
  --color-purple-500: #8b5cf6;
  --color-purple-400: #a78bfa;
  --color-purple-100: rgba(139, 92, 246, 0.2);

  /* Spacing Scale (4px base) */
  --space-0: 0;
  --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 */

  /* Typography Scale */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */

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

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-full: 9999px;

  /* Letter Spacing */
  --letter-spacing-none: 0;
  --letter-spacing-tight: 0.16px;
  --letter-spacing-wide: 0.32px;

  /* Border Accent Width */
  --border-width-accent: 4px;

  /* Pure Gray Palette (for sharp/data-focused contexts) */
  --color-gray-900: #161616;
  --color-gray-800: #262626;
  --color-gray-700: #393939;
  --color-gray-600: #525252;
  --color-gray-500: #6f6f6f;
  --color-gray-400: #8d8d8d;
  --color-gray-300: #a8a8a8;
  --color-gray-200: #c6c6c6;
  --color-gray-100: #e0e0e0;
  --color-gray-50: #f4f4f4;

  /* Font Families */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.12);

  /* Animation Timing */
  --duration-fast: 0.1s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.5s;

  /* Easing */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* =====================================================
   * CORE TOKENS (Semantic)
   * Use these in component styles
   * ===================================================== */

  /* Background Colors (light theme for blog) */
  --bg-primary: #ffffff;
  --bg-secondary: var(--color-slate-50);
  --bg-tertiary: var(--color-slate-100);
  --bg-elevated: #ffffff;

  /* Text Colors */
  --text-primary: var(--color-slate-900);
  --text-secondary: var(--color-slate-600);
  --text-muted: var(--color-slate-500);
  --text-inverse: var(--color-slate-100);

  /* Border Colors */
  --border-default: var(--color-slate-200);
  --border-muted: var(--color-slate-100);
  --border-focus: var(--color-blue-500);

  /* Action Colors */
  --action-primary: var(--color-blue-500);
  --action-primary-hover: var(--color-blue-600);
  --action-secondary: var(--color-slate-100);
  --action-secondary-hover: var(--color-slate-200);
  --action-danger: var(--color-red-500);
  --action-danger-hover: var(--color-red-600);

  /* Status Colors */
  --status-success: var(--color-green-500);
  --status-success-bg: var(--color-green-100);
  --status-warning: var(--color-yellow-500);
  --status-warning-bg: var(--color-yellow-100);
  --status-error: var(--color-red-500);
  --status-error-bg: var(--color-red-100);
  --status-info: var(--color-blue-500);
  --status-info-bg: var(--color-blue-100);

  /* Interactive States */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
  --focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.3);

  /* Sharp Style Backgrounds (light, no blue tint) */
  --bg-sharp-primary: #ffffff;
  --bg-sharp-secondary: var(--color-gray-50);
  --bg-sharp-tertiary: var(--color-gray-100);

  /* Sharp Style Borders */
  --border-accent: var(--color-gray-200);

  /* =====================================================
   * COMPONENT TOKENS (Specific)
   * Override in components when needed
   * ===================================================== */

  /* Button */
  --btn-primary-bg: var(--action-primary);
  --btn-primary-bg-hover: var(--action-primary-hover);
  --btn-primary-text: white;
  --btn-secondary-bg: var(--action-secondary);
  --btn-secondary-bg-hover: var(--action-secondary-hover);
  --btn-secondary-text: var(--text-primary);
  --btn-danger-bg: var(--action-danger);
  --btn-danger-bg-hover: var(--action-danger-hover);
  --btn-danger-text: white;
  --btn-padding-x: var(--space-4);
  --btn-padding-y: var(--space-3);
  --btn-radius: var(--radius-lg);

  /* Card */
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-default);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-4);
  --card-shadow: var(--shadow-md);

  /* Input */
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-secondary);
  --input-radius: var(--radius-lg);
  --input-padding-x: var(--space-3);
  --input-padding-y: var(--space-3);

  /* Modal */
  --modal-bg: var(--bg-secondary);
  --modal-border: var(--border-default);
  --modal-radius: var(--radius-xl);
  --modal-shadow: var(--shadow-xl);
  --modal-backdrop: rgba(0, 0, 0, 0.6);

  /* Tooltip */
  --tooltip-bg: var(--bg-tertiary);
  --tooltip-text: var(--text-primary);
  --tooltip-border: var(--border-default);
  --tooltip-radius: var(--radius-md);

  /* Badge */
  --badge-padding-x: var(--space-2);
  --badge-padding-y: var(--space-1);
  --badge-radius: var(--radius-full);
  --badge-font-size: var(--font-size-xs);

  /* Card - Sharp Variant */
  --card-sharp-bg: var(--bg-sharp-secondary);
  --card-sharp-border: 1px solid var(--color-gray-200);
  --card-sharp-accent: var(--border-width-accent) solid var(--border-accent);
  --card-sharp-radius: var(--radius-none);
  --card-sharp-padding: var(--space-4);

  /* Data Typography */
  --text-data-font: var(--font-mono);
  --text-data-size: var(--font-size-sm);
  --text-data-weight: var(--font-weight-medium);

  /* Label Typography */
  --text-label-size: var(--font-size-xs);
  --text-label-spacing: var(--letter-spacing-wide);
  --text-label-weight: var(--font-weight-medium);
  --text-label-transform: uppercase;

  /* =====================================================
   * DATA VISUALIZATION TOKENS
   * Chart colors for blog posts and data reports
   * ===================================================== */

  /* Carbon Design System Categorical Palette
   * Use for multi-series charts where each series needs a distinct color.
   * Ordered by perceptual distinctiveness for accessibility. */
  --chart-cat-1: #6929c4;  /* Purple 70 */
  --chart-cat-2: #1192e8;  /* Cyan 50 */
  --chart-cat-3: #005d5d;  /* Teal 70 */
  --chart-cat-4: #9f1853;  /* Magenta 70 */
  --chart-cat-5: #fa4d56;  /* Red 50 */
  --chart-cat-6: #009d9a;  /* Teal 50 */
  --chart-cat-7: #8a3ffc;  /* Purple 60 */
  --chart-cat-8: #bae6ff;  /* Cyan 10 */

  /* Semantic Chart Colors
   * Use when data has inherent meaning (good/bad, up/down). */
  --chart-demand: #fa4d56;       /* Carbon Red 50 - consumption, crisis, cost */
  --chart-demand-dark: #da1e28;  /* Carbon Red 60 - accelerated/worst-case */
  --chart-efficiency: var(--color-green-500);  /* Gains, positive trends */
  --chart-projection: #1192e8;   /* Carbon Cyan 50 - forecasts, info */
  --chart-warning: var(--color-yellow-500);    /* Caution, thresholds */
  --chart-ai: var(--color-purple-500);         /* AI/compute workloads */
  --chart-neutral: var(--color-gray-500);      /* Baselines, controls */

  /* Chart Chrome Colors (for matplotlib / canvas charts)
   * Light theme with clean, readable chart styling. */
  --chart-bg: #ffffff;                     /* Figure background */
  --chart-plot-bg: var(--color-gray-50);   /* Axes/plot area background */
  --chart-grid: var(--color-gray-200);     /* Grid lines */
  --chart-spine: var(--color-gray-300);    /* Axis spines */
  --chart-title: var(--color-gray-900);    /* Chart titles */
  --chart-label: var(--color-gray-700);    /* Axis labels, legend text */
  --chart-tick: var(--color-gray-600);     /* Tick labels */
  --chart-annotation: var(--color-gray-600); /* Annotations */

  /* Carbon-Compatible Aliases (used in existing blog posts)
   * These map the --cds-* names to the canonical tokens above. */
  --cds-charts-1-1: var(--chart-cat-1);
  --cds-charts-1-2: var(--chart-cat-2);
  --cds-charts-1-3: var(--chart-cat-3);
  --cds-charts-1-4: var(--chart-cat-4);
  --cds-charts-1-5: var(--chart-cat-5);

  /* CDS Layout Aliases (for blog post inline styles) */
  --cds-background: var(--bg-sharp-primary);
  --cds-layer-01: var(--bg-sharp-secondary);
  --cds-layer-02: var(--bg-sharp-tertiary);
  --cds-border-subtle: var(--color-gray-200);
  --cds-border-strong: var(--color-gray-400);
  --cds-text-primary: var(--color-gray-900);
  --cds-text-secondary: var(--color-gray-700);
  --cds-text-helper: var(--color-gray-500);
  --cds-support-success: var(--status-success);
  --cds-support-warning: var(--color-yellow-600);
  --cds-support-error: var(--status-error);
  --cds-support-info: var(--color-blue-600);
  --cds-link-primary: var(--color-blue-600);

  /* =====================================================
   * LEGACY COMPATIBILITY
   * Maps old token names to new structure
   * ===================================================== */

  /* These maintain backwards compatibility with existing code */
  --accent-blue: var(--color-blue-500);
  --accent-green: var(--color-green-500);
  --accent-yellow: var(--color-yellow-500);
  --accent-red: var(--color-red-500);
  --border-color: var(--border-default);

  /* =====================================================
   * BRAND TOKENS
   * Logo and brand identity colors
   * ===================================================== */

  /* Logo Colors */
  --brand-ai: var(--color-blue-600);           /* [ai] text color */
  --brand-ai-glow: var(--color-blue-500);      /* [ai] glow effect */
  --brand-bracket: var(--color-slate-400);     /* [ ] brackets */
  --brand-text: var(--color-slate-900);        /* ctrl text */
  --brand-dot: var(--color-slate-400);         /* . separator */
  --brand-dev: var(--color-slate-600);         /* dev text */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0s;
    --duration-normal: 0s;
    --duration-slow: 0s;
    --duration-slower: 0s;
  }
}