/* ============================================
   TrikAi Avatar - Design Tokens
   Organic Premium Dark + Warm Gradients
   ============================================ */

:root {
    /* === Colors: Dark Foundation (Warm Undertone — research: 70% of companion apps) === */
    --color-bg: #0F0D14;
    --color-bg-rgb: 15, 13, 20;
    --color-surface-1: #16131E;
    --color-surface-2: #1C1826;
    --color-surface-3: #241E2E;
    --color-surface-4: #2E2838;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-subtle: rgba(255, 255, 255, 0.05);
    --color-border-strong: rgba(255, 255, 255, 0.15);

    /* === Colors: Accent Palette === */
    --color-purple: #7B68EE;
    --color-purple-rgb: 123, 104, 238;
    --color-purple-light: #9B8BF4;
    --color-purple-dark: #6350D8;
    --color-purple-muted: rgba(123, 104, 238, 0.15);

    --color-coral: #FF6B6B;
    --color-coral-rgb: 255, 107, 107;
    --color-coral-light: #FF8F8F;
    --color-coral-dark: #E85555;
    --color-coral-muted: rgba(255, 107, 107, 0.15);

    --color-lavender: #B794F6;
    --color-lavender-rgb: 183, 148, 246;
    --color-lavender-light: #D4BDF9;
    --color-lavender-dark: #A07AE8;
    --color-lavender-muted: rgba(183, 148, 246, 0.15);

    --color-teal: #4FD1C5;
    --color-teal-rgb: 79, 209, 197;
    --color-teal-light: #7CE1D4;
    --color-teal-dark: #3DBAB0;
    --color-teal-muted: rgba(79, 209, 197, 0.15);

    --color-gold: #F6AD55;
    --color-gold-rgb: 246, 173, 85;
    --color-gold-light: #F9C078;
    --color-gold-dark: #E89940;
    --color-gold-muted: rgba(246, 173, 85, 0.15);

    --color-cyan: #06B6D4;
    --color-cyan-rgb: 6, 182, 212;
    --color-cyan-light: #22D3EE;
    --color-cyan-dark: #0891B2;
    --color-cyan-muted: rgba(6, 182, 212, 0.15);

    /* === Colors: Text (Opacity-Based System) === */
    --color-text-primary: rgba(255, 255, 255, 0.92);
    --color-text-secondary: rgba(255, 255, 255, 0.6);
    --color-text-tertiary: rgba(255, 255, 255, 0.4);
    --color-text-muted: rgba(255, 255, 255, 0.25);
    --color-text-inverse: #0F0D14;
    --color-text-accent: #7B68EE;

    /* === Colors: Semantic === */
    --color-success: #4FD1C5;
    --color-warning: #F6AD55;
    --color-error: #FF6B6B;
    --color-info: #7B68EE;

    /* === Gradients === */
    --gradient-primary: linear-gradient(135deg, #7B68EE, #FF6B6B);
    --gradient-brand: linear-gradient(135deg, #7B68EE, #06B6D4);
    --gradient-cta: linear-gradient(135deg, #7C3AED, #3B82F6);
    --gradient-avatar: linear-gradient(135deg, #7B68EE, #B794F6);
    --gradient-teal-gold: linear-gradient(90deg, #4FD1C5, #F6AD55);
    --gradient-gold-coral: linear-gradient(90deg, #F6AD55, #FF6B6B);
    --gradient-surface: linear-gradient(180deg, #16131E, #1C1826);
    --gradient-full-spectrum: linear-gradient(135deg, #7B68EE, #B794F6, #FF6B6B, #F6AD55, #4FD1C5);
    --gradient-mood-happy: linear-gradient(135deg, #4FD1C5, #F6AD55);
    --gradient-mood-calm: linear-gradient(135deg, #7B68EE, #4FD1C5);
    --gradient-mood-sad: linear-gradient(135deg, #7B68EE, #2D2D52);
    --gradient-mood-energetic: linear-gradient(135deg, #FF6B6B, #F6AD55);
    --gradient-voice: radial-gradient(circle, rgba(124, 58, 237, 0.8), rgba(6, 182, 212, 0.4), transparent);
    --gradient-hero-glow: radial-gradient(circle at 50% 40%, rgba(123, 104, 238, 0.15), transparent 60%);

    /* === Typography === */
    --font-display: 'Clash Display', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    /* Font Sizes */
    --text-display: 32px;
    --text-h1: 28px;
    --text-h2: 24px;
    --text-h3: 20px;
    --text-h4: 18px;
    --text-body-lg: 17px;
    --text-body: 15px;
    --text-body-sm: 13px;
    --text-caption: 12px;
    --text-overline: 11px;
    --text-button: 16px;
    --text-button-sm: 14px;

    /* Line Heights */
    --leading-display: 40px;
    --leading-h1: 36px;
    --leading-h2: 32px;
    --leading-h3: 28px;
    --leading-h4: 24px;
    --leading-body-lg: 26px;
    --leading-body: 22px;
    --leading-body-sm: 18px;
    --leading-caption: 16px;
    --leading-overline: 14px;

    /* Font Weights */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;

    /* Letter Spacing */
    --tracking-tight: -0.5px;
    --tracking-normal: 0;
    --tracking-wide: 0.3px;
    --tracking-wider: 1px;

    /* === Spacing (4px base) === */
    --space-0: 0;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;

    /* === Border Radius === */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-default: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* === Shadows === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow-sm: 0 0 16px rgba(123, 104, 238, 0.2);
    --shadow-glow-md: 0 0 32px rgba(123, 104, 238, 0.3);
    --shadow-glow-lg: 0 0 60px rgba(123, 104, 238, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(123, 104, 238, 0.4);
    --shadow-glow-coral: 0 0 20px rgba(255, 107, 107, 0.4);
    --shadow-glow-teal: 0 0 20px rgba(79, 209, 197, 0.4);
    --shadow-glow-cyan: 0 0 20px rgba(6, 182, 212, 0.4);

    /* === Z-Index Scale === */
    --z-base: 0;
    --z-dropdown: 60;
    --z-sticky: 50;
    --z-fixed: 70;
    --z-modal-backdrop: 80;
    --z-modal: 85;
    --z-toast: 90;
    --z-tooltip: 100;

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-enter: cubic-bezier(0, 0, 0.2, 1);
    --easing-exit: cubic-bezier(0.4, 0, 1, 1);
    --easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* === Glass Surface === */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-bg-strong: rgba(255, 255, 255, 0.08);
    --glass-blur: 16px;
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-radius: 20px;

    /* === Layout === */
    --max-width-mobile: 100%;
    --max-width-tablet: 600px;
    --max-width-desktop: 1200px;
    --tab-nav-height: 64px;
    --header-height: 56px;
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}