/* ==========================================================================
   LINGUAKONNECT DESIGN SYSTEM - VARIABLES & TOKENS
   ========================================================================== */

:root {
    /* Base Color System - Dark Theme (Default) */
    --bg-primary: #070D1E;
    --bg-secondary: #0F172A;
    --bg-surface: #1E293B;
    --bg-surface-elevated: #24344D;
    --bg-glass: rgba(15, 23, 42, 0.75);
    --bg-glass-card: rgba(30, 41, 59, 0.65);
    --bg-glass-input: rgba(7, 13, 30, 0.85);

    /* Text Colors */
    --text-primary: #F8FAFC;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --text-dim: #64748B;
    --text-inverse: #070D1E;

    /* Brand Accents */
    --accent-teal: #06B6D4;
    --accent-teal-hover: #0891B2;
    --accent-teal-glow: rgba(6, 182, 212, 0.25);
    --accent-coral: #F43F5E;
    --accent-coral-hover: #E11D48;
    --accent-coral-glow: rgba(244, 63, 94, 0.25);
    --accent-emerald: #10B981;
    --accent-amber: #F59E0B;
    --accent-indigo: #6366F1;

    /* Borders & Dividers */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.15);
    --border-highlight: rgba(6, 182, 212, 0.4);
    --border-coral-highlight: rgba(244, 63, 94, 0.4);

    /* Shadows & Elevations */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow-teal: 0 0 25px rgba(6, 182, 212, 0.2);
    --shadow-glow-coral: 0 0 25px rgba(244, 63, 94, 0.2);

    /* Typography */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Sizing & Radii */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* Transitions & Motion */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* Layout Constraints */
    --container-max-width: 1280px;
    --header-height: 80px;
}

/* Light Theme Variables */
[data-theme="light"] {
    --bg-primary: #F8FAFC;
    --bg-secondary: #FFFFFF;
    --bg-surface: #F1F5F9;
    --bg-surface-elevated: #E2E8F0;
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-glass-card: rgba(255, 255, 255, 0.9);
    --bg-glass-input: #FFFFFF;

    --text-primary: #0F172A;
    --text-secondary: #334155;
    --text-muted: #64748B;
    --text-dim: #94A3B8;
    --text-inverse: #FFFFFF;

    --accent-teal: #0284C7;
    --accent-teal-hover: #0369A1;
    --accent-teal-glow: rgba(2, 132, 199, 0.15);
    --accent-coral: #E11D48;
    --accent-coral-hover: #BE123C;
    --accent-coral-glow: rgba(225, 29, 72, 0.15);

    --border-subtle: rgba(15, 23, 42, 0.08);
    --border-medium: rgba(15, 23, 42, 0.14);
    --border-highlight: rgba(2, 132, 199, 0.35);
    --border-coral-highlight: rgba(225, 29, 72, 0.35);

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --shadow-glow-teal: 0 0 25px rgba(2, 132, 199, 0.12);
    --shadow-glow-coral: 0 0 25px rgba(225, 29, 72, 0.12);
}