/* ==========================================================================
   ELBAMAK - Design Tokens & Variables (Light Theme - Stripe Style)
   Logo Colors: #FECD14 (Yellow) | #2D2C2B (Charcoal) | #FF0000 (Accent Dot)
   ========================================================================== */

:root {
    /* 60% Dominant Background & Surface Colors (Pure Corporate Neutral - Zero Blue) */
    --bg-main: #FFFFFF;
    --bg-subtle: #F9F8F6;
    --bg-surface: #FFFFFF;
    --bg-muted: #F2F1EE;
    --bg-steel: #E7E6E2;
    --bg-dark: #1A1918;             /* Logo Darkest Neutral */
    --bg-dark-surface: #2D2C2B;     /* Exact Logo Charcoal */

    /* 30% Structure, Typography & Borders (Pure Neutral Graphite - Zero Blue) */
    --text-primary: #2D2C2B;        /* Exact Logo Charcoal - Never Navy/Slate */
    --text-secondary: #5C5B58;      /* Neutral Warm Graphite */
    --text-muted: #8E8D8A;          /* Neutral Steel Gray */
    --text-white: #FFFFFF;

    --border-color: #E2E1DD;
    --border-subtle: #EFEFEA;
    --border-strong: #CBC9C4;
    --border-dark: rgba(255, 255, 255, 0.12);

    /* 10% Focus, CTA & Accents (Exact Logo Palette) */
    --primary: #FECD14;             /* Exact Logo Cadmium Yellow */
    --primary-hover: #EAB308;
    --primary-light: rgba(254, 205, 20, 0.15);
    --primary-glow: rgba(254, 205, 20, 0.4);

    --secondary: #2D2C2B;           /* Exact Logo Deep Graphite */
    --secondary-hover: #1A1918;     /* Exact Logo Deepest Black */
    --secondary-light: rgba(45, 44, 43, 0.06);

    --accent-red: #FF0000;          /* Exact Logo Red Accent Dot */
    --accent-green: #10B981;        /* Simulator Pass Indicator */

    /* Typography */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Space Mono', Consolas, monospace;

    /* Spacing System */
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */
    --space-24: 6rem;    /* 96px */

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Flat Architectural Precision - No Blurry Shadows */
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-yellow: none;

    /* Layout & Animation */
    --container-max: 1240px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}