/* ============================================
   SOCO DESIGN TOKENS
   ============================================
   Single source of truth for all design values.
   Import this file FIRST in your CSS files.

   Usage:
     @import url('tokens.css');

   Or link in HTML before other stylesheets:
     <link rel="stylesheet" href="/static/tokens.css">
   ============================================ */

:root {
    /* =========================================
       COLORS - PRIMARY BRAND
       ========================================= */

    /* Electric Blue - Primary brand color */
    --color-primary: #3b6df0;
    --color-primary-hover: #2a5cd9;
    --color-primary-muted: rgba(59, 109, 240, 0.1);
    --color-primary-soft: rgba(59, 109, 240, 0.15);

    /* =========================================
       COLORS - SEMANTIC
       ========================================= */

    /* Success - Green */
    --color-success: #10b981;
    --color-success-soft: #d1fae5;

    /* Warning - Amber/Orange */
    --color-warning: #f59e0b;
    --color-warning-soft: #fef3c7;

    /* Error - Red */
    --color-error: #dc2626;
    --color-error-soft: #fef2f2;

    /* Info - Sky Blue */
    --color-info: #0ea5e9;
    --color-info-soft: #e0f2fe;

    /* =========================================
       COLORS - ROSE/RED SCALE
       For danger zones and error states
       ========================================= */

    --color-rose-50: #fff1f2;
    --color-rose-100: #ffe4e6;
    --color-rose-200: #fecdd3;
    --color-rose-300: #fda4af;
    --color-rose-400: #fb7185;
    --color-rose-600: #e11d48;
    --color-rose-700: #be123c;
    --color-rose-800: #9f1239;

    /* =========================================
       COLORS - INDIGO SCALE
       For avatars and accents
       ========================================= */

    --color-indigo-100: #e0e7ff;
    --color-indigo-300: #a5b4fc;
    --color-indigo-700: #4338ca;
    --color-indigo-900: #312e81;

    /* =========================================
       COLORS - NEUTRALS
       ========================================= */

    /* Ink - Primary text color */
    --color-ink: #1a1f2e;
    --color-ink-soft: #2d3548;

    /* Slate - Gray scale for UI elements */
    --color-slate-50: #fafbfc;
    --color-slate-100: #f4f6f9;
    --color-slate-200: #e9ecf2;
    --color-slate-300: #d1d7e3;
    --color-slate-400: #9ba5b9;
    --color-slate-500: #5c6577;  /* WCAG AA compliant - 5.1:1 contrast */
    --color-slate-600: #4a5568;
    --color-slate-700: #374151;
    --color-slate-800: #1f2937;
    --color-slate-900: #111827;

    /* =========================================
       COLORS - SURFACES
       ========================================= */

    --surface-base: #ffffff;
    --surface-elevated: #ffffff;
    --surface-muted: var(--color-slate-100);
    --surface-ground: var(--color-slate-50);

    /* =========================================
       TYPOGRAPHY
       ========================================= */

    /* Font Families */
    --font-display: 'Sora', system-ui, -apple-system, sans-serif;
    --font-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

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

    /* =========================================
       SPACING
       ========================================= */

    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */

    /* =========================================
       BORDER RADIUS
       ========================================= */

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* =========================================
       SHADOWS
       ========================================= */

    --shadow-xs: 0 1px 2px rgba(26, 31, 46, 0.04);
    --shadow-sm: 0 1px 3px rgba(26, 31, 46, 0.06), 0 1px 2px rgba(26, 31, 46, 0.04);
    --shadow-md: 0 4px 12px rgba(26, 31, 46, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 31, 46, 0.12);
    --shadow-glow: 0 8px 20px rgba(59, 109, 240, 0.15);

    /* =========================================
       TRANSITIONS
       ========================================= */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* =========================================
       Z-INDEX SCALE
       ========================================= */

    --z-dropdown: 1000;
    --z-sticky: 100;
    --z-modal: 1050;
    --z-tooltip: 1100;
}

/* =============================================
   DARK MODE - System Preference
   ============================================= */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors - lighter for dark backgrounds */
        --color-primary: #5c8bf5;
        --color-primary-hover: #7aa0f7;
        --color-primary-muted: rgba(92, 139, 245, 0.15);
        --color-primary-soft: rgba(92, 139, 245, 0.2);

        /* Semantic colors - softer backgrounds */
        --color-success-soft: rgba(16, 185, 129, 0.15);
        --color-warning-soft: rgba(245, 158, 11, 0.15);
        --color-error-soft: rgba(220, 38, 38, 0.15);
        --color-info-soft: rgba(14, 165, 233, 0.15);

        /* Rose scale for dark mode */
        --color-rose-50: rgba(244, 63, 94, 0.1);
        --color-rose-100: rgba(244, 63, 94, 0.15);
        --color-rose-200: rgba(244, 63, 94, 0.25);
        --color-rose-300: rgba(251, 113, 133, 0.4);
        --color-rose-400: #fb7185;
        --color-rose-600: #f43f5e;
        --color-rose-700: #fb7185;
        --color-rose-800: #fda4af;

        /* Indigo scale for dark mode */
        --color-indigo-100: rgba(99, 102, 241, 0.2);
        --color-indigo-300: #a5b4fc;
        --color-indigo-700: #818cf8;
        --color-indigo-900: rgba(99, 102, 241, 0.15);

        /* Neutrals - inverted */
        --color-ink: #e4e7ed;
        --color-ink-soft: #b8bfcc;
        --color-slate-50: #121621;
        --color-slate-100: #1a1f2e;
        --color-slate-200: #252b3d;
        --color-slate-300: #343d52;
        --color-slate-400: #4a5568;
        --color-slate-500: #9ba5b9;
        --color-slate-600: #d1d7e3;
        --color-slate-700: #e4e7ed;
        --color-slate-800: #f4f6f9;
        --color-slate-900: #fafbfc;

        /* Surfaces - dark */
        --surface-base: #1a1f2e;
        --surface-elevated: #252b3d;
        --surface-muted: #252b3d;
        --surface-ground: #121621;

        /* Shadows - darker for dark mode */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
        --shadow-glow: 0 8px 20px rgba(92, 139, 245, 0.2);
    }
}

/* =============================================
   DARK MODE - Manual Override
   ============================================= */

:root[data-theme="dark"] {
    /* Primary colors - lighter for dark backgrounds */
    --color-primary: #5c8bf5;
    --color-primary-hover: #7aa0f7;
    --color-primary-muted: rgba(92, 139, 245, 0.15);
    --color-primary-soft: rgba(92, 139, 245, 0.2);

    /* Semantic colors - softer backgrounds */
    --color-success-soft: rgba(16, 185, 129, 0.15);
    --color-warning-soft: rgba(245, 158, 11, 0.15);
    --color-error-soft: rgba(220, 38, 38, 0.15);
    --color-info-soft: rgba(14, 165, 233, 0.15);

    /* Rose scale for dark mode */
    --color-rose-50: rgba(244, 63, 94, 0.1);
    --color-rose-100: rgba(244, 63, 94, 0.15);
    --color-rose-200: rgba(244, 63, 94, 0.25);
    --color-rose-300: rgba(251, 113, 133, 0.4);
    --color-rose-400: #fb7185;
    --color-rose-600: #f43f5e;
    --color-rose-700: #fb7185;
    --color-rose-800: #fda4af;

    /* Indigo scale for dark mode */
    --color-indigo-100: rgba(99, 102, 241, 0.2);
    --color-indigo-300: #a5b4fc;
    --color-indigo-700: #818cf8;
    --color-indigo-900: rgba(99, 102, 241, 0.15);

    /* Neutrals - inverted */
    --color-ink: #e4e7ed;
    --color-ink-soft: #b8bfcc;
    --color-slate-50: #121621;
    --color-slate-100: #1a1f2e;
    --color-slate-200: #252b3d;
    --color-slate-300: #343d52;
    --color-slate-400: #4a5568;
    --color-slate-500: #9ba5b9;
    --color-slate-600: #d1d7e3;
    --color-slate-700: #e4e7ed;
    --color-slate-800: #f4f6f9;
    --color-slate-900: #fafbfc;

    /* Surfaces - dark */
    --surface-base: #1a1f2e;
    --surface-elevated: #252b3d;
    --surface-muted: #252b3d;
    --surface-ground: #121621;

    /* Shadows - darker for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 8px 20px rgba(92, 139, 245, 0.2);
}

/* =============================================
   LEGACY VARIABLE ALIASES
   =============================================
   Maps old variable names to new ones for
   backwards compatibility during migration.
   ============================================= */

:root {
    /* Proto-* aliases (used extensively in prototype.css) */
    --proto-electric: var(--color-primary);
    --proto-electric-hover: var(--color-primary-hover);
    --proto-electric-muted: var(--color-primary-muted);
    --proto-electric-soft: var(--color-primary-soft);

    --proto-success: var(--color-success);
    --proto-success-soft: var(--color-success-soft);
    --proto-warning: var(--color-warning);
    --proto-warning-soft: var(--color-warning-soft);
    --proto-error: var(--color-error);
    --proto-error-soft: var(--color-error-soft);
    --proto-info: var(--color-info);
    --proto-info-soft: var(--color-info-soft);

    --proto-rose-50: var(--color-rose-50);
    --proto-rose-100: var(--color-rose-100);
    --proto-rose-200: var(--color-rose-200);
    --proto-rose-300: var(--color-rose-300);
    --proto-rose-400: var(--color-rose-400);
    --proto-rose-600: var(--color-rose-600);
    --proto-rose-700: var(--color-rose-700);
    --proto-rose-800: var(--color-rose-800);

    --proto-indigo-100: var(--color-indigo-100);
    --proto-indigo-300: var(--color-indigo-300);
    --proto-indigo-700: var(--color-indigo-700);
    --proto-indigo-900: var(--color-indigo-900);

    --proto-ink: var(--color-ink);
    --proto-ink-soft: var(--color-ink-soft);
    --proto-slate-50: var(--color-slate-50);
    --proto-slate-100: var(--color-slate-100);
    --proto-slate-200: var(--color-slate-200);
    --proto-slate-300: var(--color-slate-300);
    --proto-slate-400: var(--color-slate-400);
    --proto-slate-500: var(--color-slate-500);
    --proto-slate-600: var(--color-slate-600);
    --proto-slate-700: var(--color-slate-700);
    --proto-slate-800: var(--color-slate-800);
    --proto-slate-900: var(--color-slate-900);

    --proto-surface: var(--surface-base);
    --proto-surface-elevated: var(--surface-elevated);
    --proto-surface-muted: var(--surface-muted);

    --proto-font-display: var(--font-display);
    --proto-font-body: var(--font-body);
    --proto-font-mono: var(--font-mono);

    --proto-space-xs: var(--space-xs);
    --proto-space-sm: var(--space-sm);
    --proto-space-md: var(--space-md);
    --proto-space-lg: var(--space-lg);
    --proto-space-xl: var(--space-xl);
    --proto-space-2xl: var(--space-2xl);

    --proto-radius-sm: var(--radius-sm);
    --proto-radius-md: var(--radius-md);
    --proto-radius-lg: var(--radius-lg);
    --proto-radius-xl: var(--radius-xl);
    --proto-radius-full: var(--radius-full);

    --proto-shadow-xs: var(--shadow-xs);
    --proto-shadow-sm: var(--shadow-sm);
    --proto-shadow-md: var(--shadow-md);
    --proto-shadow-lg: var(--shadow-lg);
    --proto-shadow-hover: var(--shadow-glow);

    --proto-transition-fast: var(--transition-fast);
    --proto-transition-normal: var(--transition-normal);
    --proto-transition-slow: var(--transition-slow);
}