/**
 * World-Class Design System Variables
 * Base rem: 10px (html { font-size: 62.5%; })
 * Palette inspired by CSS Design Awards (Premium Dark & Orange Flame)
 */

:root {
    /* -------------------------------------------------------------------------- */
    /* 1. PRIMARY COLORS (Orange Flame System)                                    */
    /* -------------------------------------------------------------------------- */
    --primary-50: #fff8ed;
    --primary-100: #ffefd4;
    --primary-200: #ffd9a8;
    --primary-300: #ffbc70;
    --primary-400: #ff9137;
    --primary-500: #ff710a;
    /* Core Brand */
    --primary-600: #ff5400;
    /* Deep Flame */
    --primary-700: #cc3d00;
    --primary-800: #a33200;
    --primary-900: #852c03;
    --primary-950: #481300;
    --primary: #ff710a;
    /* SPC TEAL PALETTE (From Screenshot) */
    --teal-50: #f0f9fa;
    --teal-100: #dcf2f5;
    --teal-200: #bde5ec;
    --teal-300: #8fd0dc;
    --teal-400: #57b3c6;
    --teal-500: #3897ac;
    /* Brand Core */
    --teal-600: #2d7a8e;
    --teal-700: #296475;
    --teal-800: #285361;
    --teal-900: #254753;
    --teal: #3897ac;
    /* -------------------------------------------------------------------------- */
    /* 2. SECONDARY COLORS (Premium Charcoal / Deep Slate)                        */
    /* -------------------------------------------------------------------------- */
    --secondary-50: #f4f4f5;
    --secondary-100: #e4e4e7;
    --secondary-200: #d4d4d8;
    --secondary-300: #a1a1aa;
    --secondary-400: #71717a;
    --secondary-500: #52525b;
    --secondary-600: #3f3f46;
    --secondary-700: #27272a;
    /* Main Dark Component */
    --secondary-800: #1a1a1a;
    /* Background / Text-Dark */
    --secondary-900: #111111;
    --secondary-950: #090909;
    --secondary: #111111;
    /* -------------------------------------------------------------------------- */
    /* 3. ACCENT COLORS (Gold / Yellow Sun)                                       */
    /* -------------------------------------------------------------------------- */
    --accent-50: #fffbeb;
    --accent-100: #fef3c7;
    --accent-200: #fde68a;
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f59e0b;
    --accent-600: #d97706;
    --accent-700: #b45309;
    --accent-800: #92400e;
    --accent-900: #78350f;
    --accent: #b45309;

    /* -------------------------------------------------------------------------- */
    /* 4. NEUTRAL COLORS (Clean Grayscale)                                        */
    /* -------------------------------------------------------------------------- */
    --neutral-50: #ffffff;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;

    /* -------------------------------------------------------------------------- */
    /* 5. SEMANTIC COLORS                                                         */
    /* -------------------------------------------------------------------------- */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;

    /* -------------------------------------------------------------------------- */
    /* 6. TYPOGRAPHY SYSTEM                                                       */
    /* -------------------------------------------------------------------------- */
    --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-secondary: 'Outfit', sans-serif;

    /* Contrast Typography Scale */
    --fs-xs: 1.2rem;
    --fs-sm: 1.4rem;
    --fs-base: 1.6rem;
    --fs-md: 1.8rem;
    --fs-lg: 2.0rem;
    --fs-xl: 2.4rem;
    --fs-2xl: 3.2rem;
    --fs-3xl: 4.0rem;
    --fs-4xl: 4.8rem;
    --fs-5xl: 6.4rem;

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.6;
    --lh-relaxed: 1.8;

    /* -------------------------------------------------------------------------- */
    /* 7. DEPTH & SHADOWS (Layered Soft Shadows)                                  */
    /* -------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* -------------------------------------------------------------------------- */
    /* 8. SHAPE & MOTION                                                          */
    /* -------------------------------------------------------------------------- */
    --radius-sm: 0.4rem;
    --radius-md: 0.8rem;
    --radius-lg: 1.2rem;
    --radius-xl: 2.4rem;
    --radius-full: 9999px;

    --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* -------------------------------------------------------------------------- */
    /* 9. LAYOUT & WHITESPACE                                                     */
    /* -------------------------------------------------------------------------- */
    --spacing-section: 12.0rem;
    --spacing-container: 2.0rem;
    --max-width: 1440px;
    /* Wider for World-Class experience */

    /* 10. COMPONENT DIMENSIONS */
    --navbar-height: 120px;
}