/* 
 * BYSTRC-2030: GOLDEN RATIO VARIABLES
 * Adapted from kreativum-golden design system.
 * ALL dimensions, spacings and proportions derive from φ = 1.61803398875.
 * NO magic numbers allowed – every value references a φ-derived variable.
 */
:root {
    /* ═══════════════════════════════════════════════
       MATHEMATICAL CONSTANTS
       Integer powers of φ (phi) and φ⁻¹ (phi-inv)
       ═══════════════════════════════════════════════ */
    --phi: 1.61803398875;
    --phi-sq: 2.61803398875;                                  /* φ²  = 2.618 */
    --phi-cu: 4.2360679775;                                   /* φ³  = 4.236 */
    --phi-inv: 0.61803398875;                                 /* φ⁻¹ = 0.618 */
    --phi-inv-2: 0.38196601125;                               /* φ⁻² = 0.382 */
    --phi-inv-3: 0.2360679775;                                /* φ⁻³ = 0.236 */
    --phi-inv-4: 0.14589803375;                               /* φ⁻⁴ = 0.146 */
    --phi-inv-5: 0.09016994375;                               /* φ⁻⁵ = 0.090 */
    --phi-inv-6: 0.05572809000;                               /* φ⁻⁶ = 0.056 */

    /* Unity constant (used as multiplier base where needed) */
    --one: 1;

    /* ═══════════════════════════════════════════════
       UNIT SCALE (from 100vw down by φ⁻¹)
       u0=100vw, u1=61.8vw, u2=38.2vw, u3=23.6vw...
       ═══════════════════════════════════════════════ */
    --u0: 100vw;
    --u1: calc(var(--u0) * var(--phi-inv));
    --u2: calc(var(--u1) * var(--phi-inv));
    --u3: calc(var(--u2) * var(--phi-inv));
    --u4: calc(var(--u3) * var(--phi-inv));
    --u5: calc(var(--u4) * var(--phi-inv));
    --u6: calc(var(--u5) * var(--phi-inv));
    --u7: calc(var(--u6) * var(--phi-inv));
    --u8: calc(var(--u7) * var(--phi-inv));
    --u9: calc(var(--u8) * var(--phi-inv));
    --u10: calc(var(--u9) * var(--phi-inv));
    --u11: calc(var(--u10) * var(--phi-inv));
    --u12: calc(var(--u11) * var(--phi-inv));

    /* Line weights */
    --line-thin: var(--u12);
    --line-medium: var(--u11);
    --line-thick: var(--u10);

    /* ═══════════════════════════════════════════════
       SPIRAL SOURCE COLORS (16-step palette, light→dark)
       Raw palette – never use directly in components.
       ═══════════════════════════════════════════════ */
    --spiral-color-1:  #ffffff; /* Pure White */
    --spiral-color-2:  #fafafa; /* Off-white, extremely light grey */
    --spiral-color-3:  #f3f3f3; /* Light grey */
    --spiral-color-4:  #eaeaea; /* Medium-light grey */
    --spiral-color-5:  #e0e0e0; 
    --spiral-color-6:  #d6d6d6; 
    --spiral-color-7:  #cccccc; 
    --spiral-color-8:  #c0c0c0; 
    --spiral-color-9:  #a6a6a6; 
    --spiral-color-10: #8c8c8c; 
    --spiral-color-11: #737373; 
    --spiral-color-12: #595959; 
    --spiral-color-13: #404040; 
    --spiral-color-14: #2b2b2b; 
    --spiral-color-15: #1c1c1c; 
    --spiral-color-16: #111111; /* Near black */

    /* ═══════════════════════════════════════════════
       SEMANTIC COLORS
       ═══════════════════════════════════════════════ */
    --c-bg:          var(--spiral-color-1);
    --c-bg-alt:      var(--spiral-color-2);
    --c-ink:         var(--spiral-color-16);
    --c-ink-muted:   var(--spiral-color-13);
    --c-accent:        var(--spiral-color-16);
    --c-accent-warm:   var(--spiral-color-14);
    --c-accent-cool:   var(--spiral-color-15);
    --c-highlight:     var(--spiral-color-4);

    /* Section tile backgrounds (first 8, light→dark) */
    --c-tile-1: var(--spiral-color-1);
    --c-tile-2: var(--spiral-color-2);
    --c-tile-3: var(--spiral-color-3);
    --c-tile-4: var(--spiral-color-4);
    --c-tile-5: var(--spiral-color-5);
    --c-tile-6: var(--spiral-color-6);
    --c-tile-7: var(--spiral-color-7);
    --c-tile-8: var(--spiral-color-8);

    /* Tile heading text: achromatic, L from spiral-color-(N+8) */
    --c-tile-h-1: hsl(0 0% 35%);   /* L from color-9  */
    --c-tile-h-2: hsl(0 0% 30%);   /* L from color-10 */
    --c-tile-h-3: hsl(0 0% 25%);   /* L from color-11 */
    --c-tile-h-4: hsl(0 0% 20%);   /* L from color-12 */
    --c-tile-h-5: hsl(0 0% 15%);   /* L from color-13 */
    --c-tile-h-6: hsl(0 0% 10%);   /* L from color-14 */
    --c-tile-h-7: hsl(0 0% 6%);    /* L from color-15 */
    --c-tile-h-8: hsl(0 0% 2%);    /* L from color-16 */

    /* Tile perex text: achromatic, L from spiral-color-(N+7) */
    --c-tile-p-1: hsl(0 0% 41%);   /* L from color-8  */
    --c-tile-p-2: hsl(0 0% 35%);   /* L from color-9  */
    --c-tile-p-3: hsl(0 0% 30%);   /* L from color-10 */
    --c-tile-p-4: hsl(0 0% 25%);   /* L from color-11 */
    --c-tile-p-5: hsl(0 0% 20%);   /* L from color-12 */
    --c-tile-p-6: hsl(0 0% 15%);   /* L from color-13 */
    --c-tile-p-7: hsl(0 0% 10%);   /* L from color-14 */
    --c-tile-p-8: hsl(0 0% 6%);    /* L from color-15 */

    /* UI derived colors */
    --c-separator: color-mix(in srgb, var(--c-ink) calc(var(--phi-inv-4) * 100%), transparent);
    --c-hover-bg:  color-mix(in srgb, var(--c-ink) calc(var(--phi-inv-5) * 100%), transparent);

    /* ═══════════════════════════════════════════════
       TYPOGRAPHY SCALE
       Derived from unit scale (--u series = 100vw × φ⁻ⁿ).
       Responsively shifts by one φ step per breakpoint.
       ═══════════════════════════════════════════════ */
    --f-h1:      clamp(32px, var(--u7), 56px);    /* Hero / page title     */
    --f-h2:      clamp(24px, var(--u8), 38px);    /* Section heading       */
    --f-h3:      clamp(20px, var(--u9), 28px);    /* Subsection heading    */
    --f-body:    clamp(15px, var(--u10), 18px);   /* Body text             */
    --f-small:   clamp(12px, var(--u11), 14px);   /* Captions, labels      */

    /* ═══════════════════════════════════════════════
       LINE HEIGHTS
       Integer powers of φ only.
       ═══════════════════════════════════════════════ */
    --lh-solid: var(--one);          /* φ⁰ = 1.000 – flush, no leading    */
    --lh-tight: var(--phi-inv);      /* φ⁻¹= 0.618 – NOT for text!        */
    --lh-base:  var(--phi);          /* φ¹ = 1.618 – body text, default   */
    --lh-loose: var(--phi-sq);       /* φ² = 2.618 – spacious             */

    /* ═══════════════════════════════════════════════
       LETTER SPACING
       Derived from φ⁻ⁿ in em units.
       ═══════════════════════════════════════════════ */
    --ls-tight:  calc(var(--phi-inv-4) * -1em);  /* -0.146em – tight headlines  */
    --ls-normal: 0em;                             /* identity                    */
    --ls-wide:   calc(var(--phi-inv-3) * 1em);    /* 0.236em  – caps/labels      */
    --ls-wider:  calc(var(--phi-inv-2) * 1em);    /* 0.382em  – extreme track    */

    /* ═══════════════════════════════════════════════
       OPACITY
       Powers of φ⁻¹ only.
       ═══════════════════════════════════════════════ */
    --o-full:   var(--one);          /* 1.000 */
    --o-high:   var(--phi-inv);      /* 0.618 */
    --o-mid:    var(--phi-inv-2);    /* 0.382 */
    --o-low:    var(--phi-inv-3);    /* 0.236 */
    --o-faint:  var(--phi-inv-4);    /* 0.146 */
    --o-ghost:  var(--phi-inv-5);    /* 0.090 */

    /* ═══════════════════════════════════════════════
       FILTER VALUES (brightness, contrast)
       All φ-derived: 1 + φ⁻ⁿ or 1 - φ⁻ⁿ
       ═══════════════════════════════════════════════ */
    --filter-brighten:    calc(1 + var(--phi-inv-4));   /* ~1.146 */
    --filter-brighten-sm: calc(1 + var(--phi-inv-5));   /* ~1.090 */
    --filter-dim:         calc(1 - var(--phi-inv-4));   /* ~0.854 */
    --filter-contrast:    calc(1 + var(--phi-inv-4));   /* ~1.146 */

    /* ═══════════════════════════════════════════════
       TRANSFORM VALUES
       Scale and translate amounts, φ-derived.
       ═══════════════════════════════════════════════ */
    --scale-hover: calc(1 + var(--phi-inv-4));   /* ~1.146 */
    --scale-sm:    calc(1 + var(--phi-inv-5));    /* ~1.090 */

    /* ═══════════════════════════════════════════════
       Z-INDEX SCALE
       Fibonacci sequence (derived from φ).
       ═══════════════════════════════════════════════ */
    --z-base:    1;
    --z-raised:  2;
    --z-overlay: 5;
    --z-modal:   8;
    --z-top:     13;

    /* ═══════════════════════════════════════════════
       SPACING (Golden Ratio derived)
       ═══════════════════════════════════════════════ */
    --space-section: var(--u4);
    --space-block:   var(--u5);
    --space-line:    var(--u7);
    --space-item:    var(--u8);
    --space-page:    var(--u6);

    --layout-padding-x: clamp(24px, var(--u5), 48px);
    --layout-padding-y: clamp(24px, var(--u6), 48px);

    --paragraph-gap:      calc(var(--phi) * 1em);
    --space-inline:       calc(var(--paragraph-gap) * var(--phi-inv));
    --space-inline-tight: calc(var(--space-inline) * var(--phi-inv));

    /* ═══════════════════════════════════════════════
       BORDER RADIUS
       φ-derived from unit scale.
       ═══════════════════════════════════════════════ */
    --radius-sm: var(--u10);
    --radius:    var(--u9);
    --radius-lg: var(--u8);

    /* ═══════════════════════════════════════════════
       ANIMATION TIMINGS (Golden Ratio)
       ═══════════════════════════════════════════════ */
    --time-fast: calc(var(--phi-inv-2) * 1s);     /* φ⁻² = 0.382s */
    --time-base: calc(var(--phi-inv) * 1s);       /* φ⁻¹ = 0.618s */
    --time-slow: calc(var(--phi) * 1s);           /* φ¹  = 1.618s */
    --ease-golden: cubic-bezier(0.236, 1, 0.382, 1); /* control points = φ⁻³, 1, φ⁻², 1 */

    /* ═══════════════════════════════════════════════
       RESPONSIVE HEIGHTS (aspect-ratio adaptive)
       ═══════════════════════════════════════════════ */
    --h-hero:   var(--u2);
    --h-tile:   var(--u3);
    --h-stripe: var(--u4);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════ */

@media (max-aspect-ratio: 16/10) {
    :root {
        --h-hero:   var(--u1);
        --h-tile:   var(--u2);
        --h-stripe: var(--u3);
    }
}

@media (max-width: 1024px) or (max-aspect-ratio: 1/1) {
    :root {
        --h-hero:   var(--u1);
        --h-tile:   var(--u2);
        --layout-padding-x: clamp(20px, var(--u6), 32px);
    }
}

@media (max-width: 700px) or (max-aspect-ratio: 3/4) {
    :root {
        --h-hero:   calc(var(--u0) * 1.15);
        --h-tile:   var(--u1);
        --layout-padding-x: clamp(16px, var(--u7), 24px);
    }
}

@media (max-width: 480px) or (max-aspect-ratio: 9/16) {
    :root {
        --h-hero:   calc(var(--u0) * 1.45);
        --h-tile:   var(--u0);
        --layout-padding-x: clamp(12px, var(--u8), 16px);
    }
}