/* ============================================================
   HELIOS GOLDEN RATIO DESIGN SYSTEM v1.0
   ============================================================

   Le Nombre d'Or (φ = 1.618033988749895) - "Divine Proportion"

   Utilisé depuis l'Antiquité pour créer une harmonie visuelle
   naturelle et mathématiquement parfaite.

   Ce fichier est la SOURCE UNIQUE DE VÉRITÉ pour:
   - Typography Scale (--text-*)
   - Spacing Scale (--space-*)
   - Layout Proportions (--golden-major/minor)
   - Animation Timing (--duration-*, --ease-*)
   - Border Radius (--radius-*)
   - Shadows (--shadow-*)
   - Z-Index (--z-*)
   - Colors (--phi-*)
   - Opacity (--opacity-*)

   RÈGLE: Tous les modules DOIVENT utiliser ces variables.
   NE JAMAIS hardcoder de valeurs px/rem directement.

   ORDRE DE CHARGEMENT OBLIGATOIRE (layout.phtml):
   ┌──────────────────────────────────────────────────────────┐
   │ 1. helios-golden-ratio.css    ← CE FICHIER (variables)  │
   │ 2. helios-utilities.css       ← Classes utilitaires      │
   │ 3. helios-core.css            ← Design tokens + legacy   │
   │ 4. helios-layout.css          ← Grid, Flexbox, Layout    │
   │ 5. helios-module-template.css ← Structure standard       │
   │ 6. helios-layout-aliases.css  ← Aliases de compatibilité │
   │ 7. helios-phi-components.css  ← Composants φ             │
   │ 8. helios-enhanced.css        ← Effets avancés           │
   │ 9. helios-header-unified.css  ← Headers sticky           │
   │ 10. modules/*.css             ← Styles par module        │
   └──────────────────────────────────────────────────────────┘
   CE FICHIER DOIT TOUJOURS ÊTRE CHARGÉ EN PREMIER.
   Les variables définies ici sont utilisées par tous les
   fichiers suivants dans la cascade.

   ============================================================ */

:root {
    /* =========================================================
       GOLDEN RATIO CONSTANTS
       ========================================================= */

    /* φ (phi) - Le nombre d'or */
    --phi: 1.618033988749895;

    /* Inverse de phi (1/φ) = φ - 1 */
    --phi-inverse: 0.618033988749895;

    /* Fibonacci sequence ratios */
    --fib-ratio-sm: 0.382;  /* (φ-1)² - Golden ratio minor */
    --fib-ratio-lg: 0.618;  /* φ-1 - Golden ratio major */

    /* =========================================================
       TYPOGRAPHY SCALE (φ-based)
       Base: 16px, Ratio: 1.618

       Each step = previous × φ or previous / φ
       ========================================================= */

    /* Descending scale (smaller than base) */
    --text-4xs: 0.382rem;   /* 6.1px  - φ⁻⁴ */
    --text-3xs: 0.486rem;   /* 7.8px  - φ⁻³ approx */
    --text-2xs: 0.618rem;   /* 9.9px  - φ⁻² = 1/φ² */
    --text-xs:  0.786rem;   /* 12.6px - 1/φ¹·⁵ approx */
    --text-sm:  0.875rem;   /* 14px   - Slightly adjusted for readability */

    /* Base */
    --text-base: 1rem;      /* 16px - BASE UNIT */

    /* Ascending scale (larger than base) */
    --text-md:  1.125rem;   /* 18px   - φ⁰·² approx, common UI size */
    --text-lg:  1.272rem;   /* 20.4px - φ⁰·⁵ = √φ */
    --text-xl:  1.618rem;   /* 25.9px - φ¹ */
    --text-2xl: 2.058rem;   /* 32.9px - φ¹·⁵ approx */
    --text-3xl: 2.618rem;   /* 41.9px - φ² */
    --text-4xl: 3.236rem;   /* 51.8px - φ²·⁵ approx */
    --text-5xl: 4.236rem;   /* 67.8px - φ³ */
    --text-6xl: 5.236rem;   /* 83.8px - φ³ + 1 */
    --text-7xl: 6.854rem;   /* 109.7px - φ⁴ */

    /* Line Heights (φ-based) */
    --leading-none:   1;
    --leading-tight:  1.236;    /* 1/φ + 0.618 */
    --leading-snug:   1.382;    /* φ - 0.236 */
    --leading-normal: 1.618;    /* φ - Perfect golden ratio */
    --leading-relaxed: 1.854;   /* φ + 0.236 */
    --leading-loose:  2.0;      /* Rounded for readability */

    /* =========================================================
       SPACING SCALE (φ-based)
       Base: 8px (0.5rem), Ratio: 1.618

       Using Fibonacci-like progression
       ========================================================= */

    --space-0:  0;
    --space-px: 1px;

    /* Micro spacing */
    --space-0-5: 0.125rem;  /* 2px */
    --space-1:   0.25rem;   /* 4px */
    --space-1-5: 0.375rem;  /* 6px */

    /* Base unit and φ progressions */
    --space-2:   0.5rem;    /* 8px   - BASE SPACING UNIT */
    --space-3:   0.809rem;  /* 13px  - 8 × φ⁰·⁵ */
    --space-4:   1rem;      /* 16px  - 8 × 2 */
    --space-5:   1.309rem;  /* 21px  - Fibonacci: 8 + 13 */
    --space-6:   1.618rem;  /* 26px  - 16 × φ⁰·⁷ */
    --space-7:   2.118rem;  /* 34px  - Fibonacci: 13 + 21 */
    --space-8:   2.618rem;  /* 42px  - 16 × φ */
    --space-9:   3.427rem;  /* 55px  - Fibonacci: 21 + 34 */
    --space-10:  4.236rem;  /* 68px  - 16 × φ² */
    --space-11:  5.545rem;  /* 89px  - Fibonacci: 34 + 55 */
    --space-12:  6.854rem;  /* 110px - 16 × φ³ */
    --space-14:  8.944rem;  /* 143px - Fibonacci: 55 + 89 */
    --space-16:  11.09rem;  /* 177px - 16 × φ⁴ */

    /* =========================================================
       LAYOUT PROPORTIONS (Golden Ratio divisions)
       ========================================================= */

    /* Golden ratio percentages */
    --golden-major: 61.803%;   /* φ / (1 + φ) × 100 */
    --golden-minor: 38.197%;   /* 1 / (1 + φ) × 100 */

    /* For sidebar/content splits */
    --layout-sidebar: 260px;           /* ~16rem - Standard sidebar */
    --layout-sidebar-collapsed: 64px;  /* ~4rem */

    /* Container widths (Fibonacci-based) */
    --container-xs:  377px;   /* Fibonacci */
    --container-sm:  610px;   /* Fibonacci */
    --container-md:  987px;   /* Fibonacci */
    --container-lg:  1220px;  /* Golden: 987 × φ⁰·³ */
    --container-xl:  1597px;  /* Fibonacci */
    --container-2xl: 1920px;  /* Common max-width */

    /* =========================================================
       COMPONENT SIZES (Fibonacci-based width/height)
       For cards, panels, modals, sidebars, etc.
       ========================================================= */

    /* Micro sizes (icons, buttons) */
    --size-13:   13px;    /* Fibonacci */
    --size-21:   21px;    /* Fibonacci */
    --size-34:   34px;    /* Fibonacci */

    /* Small components (badges, small cards) */
    --size-55:   55px;    /* Fibonacci */
    --size-89:   89px;    /* Fibonacci */

    /* Medium components (cards, panels) */
    --size-144:  144px;   /* Fibonacci */
    --size-233:  233px;   /* Fibonacci */

    /* Large components (sidebars, modals) */
    --size-377:  377px;   /* Fibonacci */
    --size-610:  610px;   /* Fibonacci */

    /* Extra large (full panels, containers) */
    --size-987:  987px;   /* Fibonacci */
    --size-1597: 1597px;  /* Fibonacci */

    /* Common viewport-relative φ sizes */
    --size-golden-half:   calc(50vw * var(--phi-inverse));  /* ~30.9vw */
    --size-golden-third:  calc(33.33vw * var(--phi));       /* ~53.9vw */
    --size-golden-quarter: calc(25vw * var(--phi));         /* ~40.5vw */

    /* Fixed sizes for common UI patterns (Fibonacci) */
    --sidebar-width:      var(--size-233);   /* 233px */
    --sidebar-collapsed:  var(--size-55);    /* 55px */
    --card-width-sm:      var(--size-233);   /* 233px */
    --card-width-md:      var(--size-377);   /* 377px */
    --card-width-lg:      var(--size-610);   /* 610px */
    --modal-width-sm:     var(--size-377);   /* 377px */
    --modal-width-md:     var(--size-610);   /* 610px */
    --modal-width-lg:     var(--size-987);   /* 987px */

    /* Column widths for grids (Fibonacci-friendly) */
    --col-kanban:         var(--size-233);   /* 233px - Kanban column */
    --col-sidebar:        var(--size-233);   /* 233px */
    --col-content:        var(--size-610);   /* 610px */

    /* Grid gaps following φ */
    --grid-gap-xs: var(--space-2);   /* 8px */
    --grid-gap-sm: var(--space-3);   /* 13px */
    --grid-gap-md: var(--space-5);   /* 21px */
    --grid-gap-lg: var(--space-7);   /* 34px */
    --grid-gap-xl: var(--space-9);   /* 55px */

    /* =========================================================
       BORDER RADIUS (φ-based)
       ========================================================= */

    --radius-none: 0;
    --radius-xs:   0.191rem;  /* 3px  - φ⁻² × 8 */
    --radius-sm:   0.309rem;  /* 5px  - φ⁻¹ × 8 */
    --radius-md:   0.5rem;    /* 8px  - Base */
    --radius-lg:   0.809rem;  /* 13px - φ⁰·⁵ × 8 */
    --radius-xl:   1.309rem;  /* 21px - Fibonacci */
    --radius-2xl:  1.618rem;  /* 26px - φ × base */
    --radius-3xl:  2.118rem;  /* 34px - Fibonacci */
    --radius-full: 9999px;

    /* =========================================================
       ANIMATION TIMING (φ-based durations)
       ========================================================= */

    /* Duration scale following φ */
    --duration-instant: 0.05s;
    --duration-fast:    0.1s;
    --duration-normal:  0.162s;  /* 100ms × φ */
    --duration-medium:  0.262s;  /* 162ms × φ */
    --duration-slow:    0.424s;  /* 262ms × φ */
    --duration-slower:  0.686s;  /* 424ms × φ */
    --duration-slowest: 1.11s;   /* 686ms × φ */

    /* Golden Spiral easing curve */
    --ease-golden: cubic-bezier(0.618, 0, 0.382, 1);

    /* Other useful easings */
    --ease-in:     cubic-bezier(0.618, 0, 1, 1);
    --ease-out:    cubic-bezier(0, 0, 0.382, 1);
    --ease-in-out: cubic-bezier(0.618, 0, 0.382, 1);
    --ease-bounce: cubic-bezier(0.34, 1.618, 0.64, 1);  /* φ in the curve */
    --ease-spring: cubic-bezier(0.382, 1.618, 0.618, 1);

    /* Transition shorthand */
    --transition-instant: var(--duration-instant) var(--ease-golden);
    --transition-fast:    var(--duration-fast) var(--ease-golden);
    --transition-normal:  var(--duration-normal) var(--ease-golden);
    --transition-medium:  var(--duration-medium) var(--ease-golden);
    --transition-slow:    var(--duration-slow) var(--ease-golden);

    /* =========================================================
       Z-INDEX SCALE (Fibonacci-based)
       ========================================================= */

    --z-behind:    -1;
    --z-base:      0;
    --z-above:     1;
    --z-dropdown:  8;     /* Fibonacci */
    --z-sticky:    13;    /* Fibonacci */
    --z-fixed:     21;    /* Fibonacci */
    --z-header:    34;    /* Fibonacci */
    --z-overlay:   55;    /* Fibonacci */
    --z-modal:     89;    /* Fibonacci */
    --z-popover:   144;   /* Fibonacci */
    --z-tooltip:   233;   /* Fibonacci */
    --z-toast:     377;   /* Fibonacci */
    --z-max:       9999;

    /* =========================================================
       SHADOWS (φ-based blur and spread)
       ========================================================= */

    /* Shadow sizes following golden ratio blur progression */
    --shadow-xs:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:  0 1px 3px 0 rgba(0, 0, 0, 0.1),
                  0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1),
                  0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1),
                  0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1),
                  0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.309);

    /* Golden glow shadows (φ-based blur) */
    --shadow-glow-sm:  0 0 8px var(--glow-color, rgba(0, 191, 255, 0.309));
    --shadow-glow-md:  0 0 13px var(--glow-color, rgba(0, 191, 255, 0.382));
    --shadow-glow-lg:  0 0 21px var(--glow-color, rgba(0, 191, 255, 0.5));
    --shadow-glow-xl:  0 0 34px var(--glow-color, rgba(0, 191, 255, 0.618));

    /* =========================================================
       OPACITY SCALE (φ-based)
       ========================================================= */

    --opacity-0:   0;
    --opacity-5:   0.05;
    --opacity-10:  0.1;
    --opacity-20:  0.191;   /* 1/φ³ */
    --opacity-30:  0.309;   /* 1/φ² */
    --opacity-40:  0.382;   /* φ - 1 - 0.236 */
    --opacity-50:  0.5;
    --opacity-60:  0.618;   /* 1/φ */
    --opacity-70:  0.691;   /* 1 - 1/φ² */
    --opacity-80:  0.809;   /* 1 - 1/φ³ */
    --opacity-90:  0.9;
    --opacity-100: 1;

    /* =========================================================
       LEGACY MAPPING - Backward Compatibility
       Maps old variable names to new golden ratio values
       ========================================================= */

    /* From theme-global.css */
    --spacing-xs: var(--space-1);    /* 0.25rem */
    --spacing-sm: var(--space-2);    /* 0.5rem */
    --spacing-md: var(--space-4);    /* 1rem */
    --spacing-lg: var(--space-6);    /* 1.618rem */
    --spacing-xl: var(--space-8);    /* 2.618rem */

    --font-xs: var(--text-xs);       /* 0.786rem */
    --font-sm: var(--text-sm);       /* 0.875rem */
    --font-md: var(--text-base);     /* 1rem */
    --font-lg: var(--text-md);       /* 1.125rem */
    --font-xl: var(--text-lg);       /* 1.272rem */

    --radius-sm-legacy: var(--radius-sm);   /* ~5px */
    --radius-md-legacy: var(--radius-md);   /* 8px */
    --radius-lg-legacy: var(--radius-lg);   /* ~13px */
    --radius-xl-legacy: var(--radius-xl);   /* ~21px */

    /* From modern-design-system.css */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --border-radius-xl: var(--radius-xl);
    --border-radius-2xl: var(--radius-2xl);
    --border-radius-full: var(--radius-full);

    --transition-fast-legacy: var(--duration-fast) var(--ease-golden);
    --transition-normal-legacy: var(--duration-normal) var(--ease-golden);
    --transition-slow-legacy: var(--duration-slow) var(--ease-golden);

    /* From helios-unified-design.css */
    --ease-smooth: var(--ease-golden);
    --ease-bounce-legacy: var(--ease-bounce);

    /* =========================================================
       GOLDEN COLOR PALETTE (φ-based)
       Angle d'or = 360° / φ ≈ 222.5° (ou 137.5° inverse)

       Palette construite avec rotation de 137.5° sur la roue HSL
       Base: Cyan (195°, 100%, 50%) = #00bfff
       ========================================================= */

    /* Golden Angle constant */
    --golden-angle: 137.5deg;

    /* PRIMARY PALETTE - Rotation φ depuis cyan */
    --phi-cyan:      hsl(195, 100%, 50%);    /* Base - #00bfff */
    --phi-magenta:   hsl(332.5, 85%, 55%);   /* +137.5° - Rose/magenta */
    --phi-lime:      hsl(110, 75%, 45%);     /* +275° - Vert lime */
    --phi-violet:    hsl(247.5, 80%, 60%);   /* +412.5° → 52.5° → 247.5° - Violet */

    /* SATURATION SCALE - Fibonacci percentages */
    --sat-fib-1: 8%;
    --sat-fib-2: 13%;
    --sat-fib-3: 21%;
    --sat-fib-4: 34%;
    --sat-fib-5: 55%;
    --sat-fib-6: 89%;

    /* LIGHTNESS SCALE - φ-based */
    --light-phi-dark:    19.1%;   /* 1/φ³ × 50 */
    --light-phi-medium:  30.9%;   /* 1/φ² × 50 */
    --light-phi-base:    50%;     /* Base */
    --light-phi-light:   69.1%;   /* (1 - 1/φ²) × 100 */
    --light-phi-lighter: 80.9%;   /* (1 - 1/φ³) × 100 */

    /* SEMANTIC COLORS - Using φ-based lightness */
    --phi-success:    hsl(145, 63%, 42%);    /* Green at φ lightness */
    --phi-warning:    hsl(35, 89%, 55%);     /* Orange at golden saturation */
    --phi-danger:     hsl(0, 89%, 55%);      /* Red at golden saturation */
    --phi-info:       hsl(195, 89%, 50%);    /* Cyan at golden saturation */

    /* =========================================================
       HSL φ-BASED COLOR DERIVATION SYSTEM
       Each semantic color has 5 lightness stops based on φ:
       dark (19.1%) → medium (30.9%) → base (42-55%) → light (69.1%) → lighter (80.9%)
       ========================================================= */

    /* Success - HSL(145, 63%, L) */
    --phi-success-dark:    hsl(145, 63%, 19.1%);
    --phi-success-medium:  hsl(145, 63%, 30.9%);
    --phi-success-light:   hsl(145, 63%, 69.1%);
    --phi-success-lighter: hsl(145, 63%, 80.9%);

    /* Warning - HSL(35, 89%, L) */
    --phi-warning-dark:    hsl(35, 89%, 19.1%);
    --phi-warning-medium:  hsl(35, 89%, 30.9%);
    --phi-warning-light:   hsl(35, 89%, 69.1%);
    --phi-warning-lighter: hsl(35, 89%, 80.9%);

    /* Danger - HSL(0, 89%, L) */
    --phi-danger-dark:    hsl(0, 89%, 19.1%);
    --phi-danger-medium:  hsl(0, 89%, 30.9%);
    --phi-danger-light:   hsl(0, 89%, 69.1%);
    --phi-danger-lighter: hsl(0, 89%, 80.9%);

    /* Info/Cyan - HSL(195, 100%, L) */
    --phi-info-dark:    hsl(195, 100%, 19.1%);
    --phi-info-medium:  hsl(195, 100%, 30.9%);
    --phi-info-light:   hsl(195, 100%, 69.1%);
    --phi-info-lighter: hsl(195, 100%, 80.9%);

    /* Violet (Secondary) - HSL(247.5, 80%, L) */
    --phi-violet-dark:    hsl(247.5, 80%, 19.1%);
    --phi-violet-medium:  hsl(247.5, 80%, 30.9%);
    --phi-violet-light:   hsl(247.5, 80%, 69.1%);
    --phi-violet-lighter: hsl(247.5, 80%, 80.9%);

    /* Magenta (Tertiary) - HSL(332.5, 85%, L) */
    --phi-magenta-dark:    hsl(332.5, 85%, 19.1%);
    --phi-magenta-medium:  hsl(332.5, 85%, 30.9%);
    --phi-magenta-light:   hsl(332.5, 85%, 69.1%);
    --phi-magenta-lighter: hsl(332.5, 85%, 80.9%);

    /* =========================================================
       OPACITY VARIANTS PER COLOR (φ-based Fibonacci scale)
       0.05 → 0.08 → 0.13 → 0.191 → 0.309 → 0.382 → 0.5 → 0.618
       ========================================================= */

    /* Cyan/Primary opacity variants */
    --phi-cyan-05:  rgba(0, 191, 255, 0.05);
    --phi-cyan-08:  rgba(0, 191, 255, 0.08);
    --phi-cyan-13:  rgba(0, 191, 255, 0.13);
    --phi-cyan-19:  rgba(0, 191, 255, 0.191);
    --phi-cyan-31:  rgba(0, 191, 255, 0.309);
    --phi-cyan-38:  rgba(0, 191, 255, 0.382);
    --phi-cyan-50:  rgba(0, 191, 255, 0.5);
    --phi-cyan-62:  rgba(0, 191, 255, 0.618);

    /* Violet/Secondary opacity variants */
    --phi-violet-05: rgba(102, 93, 204, 0.05);
    --phi-violet-08: rgba(102, 93, 204, 0.08);
    --phi-violet-13: rgba(102, 93, 204, 0.13);
    --phi-violet-19: rgba(102, 93, 204, 0.191);
    --phi-violet-31: rgba(102, 93, 204, 0.309);
    --phi-violet-38: rgba(102, 93, 204, 0.382);
    --phi-violet-50: rgba(102, 93, 204, 0.5);
    --phi-violet-62: rgba(102, 93, 204, 0.618);

    /* Success opacity variants */
    --phi-success-05: hsla(145, 63%, 42%, 0.05);
    --phi-success-08: hsla(145, 63%, 42%, 0.08);
    --phi-success-13: hsla(145, 63%, 42%, 0.13);
    --phi-success-19: hsla(145, 63%, 42%, 0.191);
    --phi-success-31: hsla(145, 63%, 42%, 0.309);
    --phi-success-38: hsla(145, 63%, 42%, 0.382);

    /* Danger opacity variants */
    --phi-danger-05: hsla(0, 89%, 55%, 0.05);
    --phi-danger-08: hsla(0, 89%, 55%, 0.08);
    --phi-danger-13: hsla(0, 89%, 55%, 0.13);
    --phi-danger-19: hsla(0, 89%, 55%, 0.191);
    --phi-danger-31: hsla(0, 89%, 55%, 0.309);

    /* Warning opacity variants */
    --phi-warning-05: hsla(35, 89%, 55%, 0.05);
    --phi-warning-08: hsla(35, 89%, 55%, 0.08);
    --phi-warning-13: hsla(35, 89%, 55%, 0.13);
    --phi-warning-19: hsla(35, 89%, 55%, 0.191);
    --phi-warning-31: hsla(35, 89%, 55%, 0.309);

    /* =========================================================
       FOUNDATIONAL VARIABLES
       Core tokens used throughout the system
       ========================================================= */

    /* Base colors */
    --white: #ffffff;
    --black: #000000;

    /* Dark theme background gradient (φ-based stops) */
    --phi-dark-50:   rgba(0, 0, 0, 0.05);
    --phi-dark-100:  rgba(0, 0, 0, 0.08);
    --phi-dark-200:  rgba(0, 0, 0, 0.13);
    --phi-dark-300:  rgba(0, 0, 0, 0.21);
    --phi-dark-400:  rgba(0, 0, 0, 0.34);
    --phi-dark-500:  rgba(0, 0, 0, 0.55);
    --phi-dark-600:  rgba(0, 0, 0, 0.69);
    --phi-dark-700:  rgba(0, 0, 0, 0.81);

    /* NEUTRAL GRAYS - φ-based opacity scale */
    --phi-gray-50:   rgba(255, 255, 255, 0.05);   /* 5% */
    --phi-gray-100:  rgba(255, 255, 255, 0.08);   /* 8% Fibonacci */
    --phi-gray-200:  rgba(255, 255, 255, 0.13);   /* 13% Fibonacci */
    --phi-gray-300:  rgba(255, 255, 255, 0.21);   /* 21% Fibonacci */
    --phi-gray-400:  rgba(255, 255, 255, 0.34);   /* 34% Fibonacci */
    --phi-gray-500:  rgba(255, 255, 255, 0.55);   /* 55% Fibonacci */
    --phi-gray-600:  rgba(255, 255, 255, 0.69);   /* 1 - 1/φ² */
    --phi-gray-700:  rgba(255, 255, 255, 0.81);   /* 1 - 1/φ³ */
    --phi-gray-800:  rgba(255, 255, 255, 0.90);
    --phi-gray-900:  rgba(255, 255, 255, 0.95);

    /* Light theme grays (inverted - dark on white) */
    --phi-light-gray-50:  rgba(0, 0, 0, 0.05);
    --phi-light-gray-100: rgba(0, 0, 0, 0.08);
    --phi-light-gray-200: rgba(0, 0, 0, 0.13);
    --phi-light-gray-300: rgba(0, 0, 0, 0.21);
    --phi-light-gray-400: rgba(0, 0, 0, 0.34);
    --phi-light-gray-500: rgba(0, 0, 0, 0.55);
    --phi-light-gray-600: rgba(0, 0, 0, 0.69);
    --phi-light-gray-700: rgba(0, 0, 0, 0.81);
    --phi-light-gray-800: rgba(0, 0, 0, 0.90);
    --phi-light-gray-900: rgba(0, 0, 0, 0.95);

    /* Glassmorphism blur scale (Fibonacci) */
    --blur-xs:  5px;     /* Fibonacci */
    --blur-sm:  8px;     /* Fibonacci */
    --blur-md:  13px;    /* Fibonacci */
    --blur-lg:  21px;    /* Fibonacci */
    --blur-xl:  34px;    /* Fibonacci */
    --blur-2xl: 55px;    /* Fibonacci */

    /* GRADIENT using golden angle */
    --gradient-phi: linear-gradient(
        137.5deg,
        var(--phi-cyan) 0%,
        var(--phi-violet) 38.2%,
        var(--phi-magenta) 61.8%,
        var(--phi-lime) 100%
    );

    /* Accent gradients with φ angle */
    --gradient-phi-primary: linear-gradient(137.5deg, var(--phi-cyan) 0%, var(--phi-violet) 100%);
    --gradient-phi-secondary: linear-gradient(137.5deg, var(--phi-violet) 0%, var(--phi-magenta) 100%);
    --gradient-phi-success: linear-gradient(137.5deg, var(--phi-success) 0%, var(--phi-cyan) 100%);
    --gradient-phi-danger: linear-gradient(137.5deg, var(--phi-danger) 0%, var(--phi-magenta) 100%);
    --gradient-phi-warning: linear-gradient(137.5deg, var(--phi-warning) 0%, var(--phi-danger) 100%);
}

/* ============================================================
   UTILITY CLASSES - Golden Ratio Based
   ============================================================ */

/* Typography utilities */
.text-4xs { font-size: var(--text-4xs) !important; }
.text-3xs { font-size: var(--text-3xs) !important; }
.text-2xs { font-size: var(--text-2xs) !important; }
.text-xs  { font-size: var(--text-xs) !important; }
.text-sm  { font-size: var(--text-sm) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-md  { font-size: var(--text-md) !important; }
.text-lg  { font-size: var(--text-lg) !important; }
.text-xl  { font-size: var(--text-xl) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-3xl { font-size: var(--text-3xl) !important; }
.text-4xl { font-size: var(--text-4xl) !important; }
.text-5xl { font-size: var(--text-5xl) !important; }
.text-6xl { font-size: var(--text-6xl) !important; }
.text-7xl { font-size: var(--text-7xl) !important; }

/* Line height utilities */
.leading-none    { line-height: var(--leading-none) !important; }
.leading-tight   { line-height: var(--leading-tight) !important; }
.leading-snug    { line-height: var(--leading-snug) !important; }
.leading-normal  { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }
.leading-loose   { line-height: var(--leading-loose) !important; }

/* Spacing utilities - Padding */
.p-0    { padding: var(--space-0) !important; }
.p-0-5  { padding: var(--space-0-5) !important; }
.p-1    { padding: var(--space-1) !important; }
.p-2    { padding: var(--space-2) !important; }
.p-3    { padding: var(--space-3) !important; }
.p-4    { padding: var(--space-4) !important; }
.p-5    { padding: var(--space-5) !important; }
.p-6    { padding: var(--space-6) !important; }
.p-7    { padding: var(--space-7) !important; }
.p-8    { padding: var(--space-8) !important; }
.p-9    { padding: var(--space-9) !important; }
.p-10   { padding: var(--space-10) !important; }

/* Padding X (horizontal) */
.px-0   { padding-left: var(--space-0) !important; padding-right: var(--space-0) !important; }
.px-1   { padding-left: var(--space-1) !important; padding-right: var(--space-1) !important; }
.px-2   { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3   { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4   { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.px-5   { padding-left: var(--space-5) !important; padding-right: var(--space-5) !important; }
.px-6   { padding-left: var(--space-6) !important; padding-right: var(--space-6) !important; }
.px-8   { padding-left: var(--space-8) !important; padding-right: var(--space-8) !important; }

/* Padding Y (vertical) */
.py-0   { padding-top: var(--space-0) !important; padding-bottom: var(--space-0) !important; }
.py-1   { padding-top: var(--space-1) !important; padding-bottom: var(--space-1) !important; }
.py-2   { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3   { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-4   { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-5   { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.py-6   { padding-top: var(--space-6) !important; padding-bottom: var(--space-6) !important; }
.py-8   { padding-top: var(--space-8) !important; padding-bottom: var(--space-8) !important; }

/* Spacing utilities - Margin */
.m-0    { margin: var(--space-0) !important; }
.m-auto { margin: auto !important; }
.m-1    { margin: var(--space-1) !important; }
.m-2    { margin: var(--space-2) !important; }
.m-3    { margin: var(--space-3) !important; }
.m-4    { margin: var(--space-4) !important; }
.m-5    { margin: var(--space-5) !important; }
.m-6    { margin: var(--space-6) !important; }
.m-8    { margin: var(--space-8) !important; }

/* Margin X (horizontal) */
.mx-0   { margin-left: var(--space-0) !important; margin-right: var(--space-0) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-1   { margin-left: var(--space-1) !important; margin-right: var(--space-1) !important; }
.mx-2   { margin-left: var(--space-2) !important; margin-right: var(--space-2) !important; }
.mx-3   { margin-left: var(--space-3) !important; margin-right: var(--space-3) !important; }
.mx-4   { margin-left: var(--space-4) !important; margin-right: var(--space-4) !important; }

/* Margin Y (vertical) */
.my-0   { margin-top: var(--space-0) !important; margin-bottom: var(--space-0) !important; }
.my-1   { margin-top: var(--space-1) !important; margin-bottom: var(--space-1) !important; }
.my-2   { margin-top: var(--space-2) !important; margin-bottom: var(--space-2) !important; }
.my-3   { margin-top: var(--space-3) !important; margin-bottom: var(--space-3) !important; }
.my-4   { margin-top: var(--space-4) !important; margin-bottom: var(--space-4) !important; }

/* Margin bottom */
.mb-0   { margin-bottom: var(--space-0) !important; }
.mb-1   { margin-bottom: var(--space-1) !important; }
.mb-2   { margin-bottom: var(--space-2) !important; }
.mb-3   { margin-bottom: var(--space-3) !important; }
.mb-4   { margin-bottom: var(--space-4) !important; }
.mb-5   { margin-bottom: var(--space-5) !important; }
.mb-6   { margin-bottom: var(--space-6) !important; }
.mb-8   { margin-bottom: var(--space-8) !important; }

/* Gap utilities */
.gap-0   { gap: var(--space-0) !important; }
.gap-1   { gap: var(--space-1) !important; }
.gap-2   { gap: var(--space-2) !important; }
.gap-3   { gap: var(--space-3) !important; }
.gap-4   { gap: var(--space-4) !important; }
.gap-5   { gap: var(--space-5) !important; }
.gap-6   { gap: var(--space-6) !important; }
.gap-8   { gap: var(--space-8) !important; }

/* Border radius utilities */
.rounded-none { border-radius: var(--radius-none) !important; }
.rounded-xs   { border-radius: var(--radius-xs) !important; }
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-2xl  { border-radius: var(--radius-2xl) !important; }
.rounded-3xl  { border-radius: var(--radius-3xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Golden ratio layout utilities */
.w-golden-major { width: var(--golden-major) !important; }
.w-golden-minor { width: var(--golden-minor) !important; }

/* Container utilities */
.container-xs  { max-width: var(--container-xs) !important; margin-inline: auto; }
.container-sm  { max-width: var(--container-sm) !important; margin-inline: auto; }
.container-md  { max-width: var(--container-md) !important; margin-inline: auto; }
.container-lg  { max-width: var(--container-lg) !important; margin-inline: auto; }
.container-xl  { max-width: var(--container-xl) !important; margin-inline: auto; }
.container-2xl { max-width: var(--container-2xl) !important; margin-inline: auto; }

/* Transition utilities */
.transition-instant { transition: all var(--transition-instant) !important; }
.transition-fast    { transition: all var(--transition-fast) !important; }
.transition-normal  { transition: all var(--transition-normal) !important; }
.transition-medium  { transition: all var(--transition-medium) !important; }
.transition-slow    { transition: all var(--transition-slow) !important; }

/* Animation delay utilities (Fibonacci-based stagger) */
.delay-1  { animation-delay: 0.05s !important; }
.delay-2  { animation-delay: 0.08s !important; }
.delay-3  { animation-delay: 0.13s !important; }
.delay-4  { animation-delay: 0.21s !important; }
.delay-5  { animation-delay: 0.34s !important; }
.delay-6  { animation-delay: 0.55s !important; }
.delay-7  { animation-delay: 0.89s !important; }
.delay-8  { animation-delay: 1.44s !important; }

/* Z-index utilities */
.z-behind   { z-index: var(--z-behind) !important; }
.z-base     { z-index: var(--z-base) !important; }
.z-above    { z-index: var(--z-above) !important; }
.z-dropdown { z-index: var(--z-dropdown) !important; }
.z-sticky   { z-index: var(--z-sticky) !important; }
.z-fixed    { z-index: var(--z-fixed) !important; }
.z-header   { z-index: var(--z-header) !important; }
.z-overlay  { z-index: var(--z-overlay) !important; }
.z-modal    { z-index: var(--z-modal) !important; }
.z-popover  { z-index: var(--z-popover) !important; }
.z-tooltip  { z-index: var(--z-tooltip) !important; }
.z-toast    { z-index: var(--z-toast) !important; }
.z-max      { z-index: var(--z-max) !important; }

/* Opacity utilities */
.opacity-0   { opacity: var(--opacity-0) !important; }
.opacity-5   { opacity: var(--opacity-5) !important; }
.opacity-10  { opacity: var(--opacity-10) !important; }
.opacity-20  { opacity: var(--opacity-20) !important; }
.opacity-30  { opacity: var(--opacity-30) !important; }
.opacity-40  { opacity: var(--opacity-40) !important; }
.opacity-50  { opacity: var(--opacity-50) !important; }
.opacity-60  { opacity: var(--opacity-60) !important; }
.opacity-70  { opacity: var(--opacity-70) !important; }
.opacity-80  { opacity: var(--opacity-80) !important; }
.opacity-90  { opacity: var(--opacity-90) !important; }
.opacity-100 { opacity: var(--opacity-100) !important; }

/* ============================================================
   GOLDEN RATIO GRID SYSTEM
   ============================================================ */

/* Flexbox with golden ratio gap */
.flex-golden {
    display: flex;
    gap: var(--space-5); /* 21px - Fibonacci */
}

.flex-golden-tight {
    display: flex;
    gap: var(--space-3); /* 13px - Fibonacci */
}

.flex-golden-loose {
    display: flex;
    gap: var(--space-7); /* 34px - Fibonacci */
}

/* Golden ratio split - Main content + Sidebar */
.golden-split {
    display: grid;
    grid-template-columns: var(--golden-major) var(--golden-minor);
    gap: var(--space-5);
}

.golden-split-reverse {
    display: grid;
    grid-template-columns: var(--golden-minor) var(--golden-major);
    gap: var(--space-5);
}

/* Responsive golden grid */
@media (max-width: 991.98px) {
    .golden-split,
    .golden-split-reverse {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   PRINT STYLES - Maintain golden proportions
   ============================================================ */

@media print {
    :root {
        --text-base: 10pt;
        --space-2: 0.125in;
        --space-4: 0.25in;
        --space-6: 0.4in;
    }
}