/* CSS Variables - Theme Configuration */
:root {
    /* Calm Warmth Dark Theme */
    --bg-color: #0D0D0F;
    --surface-color: #1A1A1E;
    --surface-elevated: #242428;
    --border-color: #2E2E33;
    --border-light: #3E3E43;

    /* Text Colors */
    --text-color: #FAFAFA;
    --text-secondary: #A1A1AA;
    --hint-color: #A1A1AA;
    --text-muted: #71717A;

    /* Primary Accent (Warm Coral) */
    --primary-color: #FF6B6B;
    --primary-soft: rgba(255, 107, 107, 0.12);
    --button-color: #FF6B6B;
    --button-text-color: #ffffff;
    --link-color: #FF6B6B;

    /* Secondary & Semantic */
    --secondary-color: #FFA07A;
    --secondary-bg: #242428;
    --success-color: #4ADE80;
    --warning-color: #FBBF24;
    --danger-color: #EF4444;

    /* Fyra Brand - Spark & Heat */
    --spark-color: #FBBF24;
    --spark-soft: rgba(251, 191, 36, 0.12);
    --spark-glow: #FFE066;
    --heat-color: #FF6B6B;
    --heat-soft: rgba(255, 107, 107, 0.12);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #FF6B6B, #FFA07A);
    --gradient-start: #FF6B6B;
    --gradient-end: #FFA07A;
    --gradient-alt-start: #FF6B6B;
    --gradient-alt-end: #FFA07A;
    --gradient-green-start: #4ADE80;
    --gradient-green-end: #22C55E;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 4px 24px rgba(255, 107, 107, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}