/*
  Portfolio / Alex Rudnicki
  Design system, visual design, and front-end code by Alex Rudnicki.
  © 2026 Alex Rudnicki. All rights reserved.
*/

:root {
  color-scheme: light;

  --cream:      #F4F0E8;
  --cream-nav:  #EAE5DA;
  --off-white:  #FAF8F4;
  --navy:       #0C1B2E;
  --blue:       #1A3F72;
  --blue-mid:   #2B5090;
  --blue-light: #3A63A8;
  --blue-pale:  #C4D6EC;
  --tone-white: #FFFFFF;
  --tone-black: #000000;

  --theme-color-day:   #EAE5DA;
  --theme-color-night: #050B14;

  --text:   #0C1B2E;
  --muted:  #4A5C6E;
  --subtle: #526982;

  --selection-bg:   var(--blue-pale);
  --selection-text: var(--navy);

  --border:         #CDD6E2;
  --border-dark:    #B8C4D4;
  --border-surface: color-mix(in srgb, var(--border-dark) 78%, transparent);
  --rule-faint:     color-mix(in srgb, var(--border-dark) 42%, transparent);

  --btn-bg:           color-mix(in srgb, var(--blue-pale) 9%, transparent);
  --btn-bg-hover:     color-mix(in srgb, var(--blue-pale) 20%, transparent);
  --btn-border:       color-mix(in srgb, var(--blue-mid) 18%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--blue-mid) 28%, transparent);

  --tag-text:   var(--subtle);
  --tag-bg:     color-mix(in srgb, var(--off-white) 42%, transparent);
  --tag-border: color-mix(in srgb, var(--blue-mid) 16%, transparent);
  --tag-weight: var(--weight-strong);

  --panel-bg:                   var(--navy);
  --panel-text:                 var(--cream);
  --panel-muted:                color-mix(in srgb, var(--cream) 90%, transparent);
  --panel-soft:                 var(--blue-pale);
  --panel-line-soft:            color-mix(in srgb, var(--cream) 14%, transparent);
  --panel-control-bg:           color-mix(in srgb, var(--cream) 8%, transparent);
  --panel-control-bg-hover:     color-mix(in srgb, var(--cream) 14%, transparent);
  --panel-control-border:       color-mix(in srgb, var(--cream) 20%, transparent);
  --panel-control-border-hover: color-mix(in srgb, var(--cream) 36%, transparent);

  --nav-glass-bg: color-mix(in srgb, var(--cream-nav) 96%, transparent);
  --nav-glass-border: color-mix(in srgb, var(--border-dark) 52%, transparent);
  --nav-glass-shadow:
    0 8px 28px color-mix(in srgb, var(--navy) 8%, transparent);
  --nav-glass-blur: 22px;
  --nav-glass-saturate: 1.08;

  --nav-drawer-glass-bg: color-mix(in srgb, var(--cream-nav) 98%, transparent);
  --nav-drawer-glass-border: var(--nav-glass-border);
  --nav-drawer-glass-shadow:
    0 14px 32px color-mix(in srgb, var(--navy) 7%, transparent);
  --nav-drawer-glass-blur: var(--nav-glass-blur);
  --nav-drawer-glass-saturate: var(--nav-glass-saturate);
  --nav-logo-text: var(--navy);
  --nav-logo-text-hover: var(--accent);
  --nav-link-text: var(--muted);
  --nav-link-text-hover: var(--navy);
  --nav-link-text-active: var(--accent);
  --nav-link-bg-hover: color-mix(in srgb, var(--navy) 6%, transparent);
  --nav-control-text: var(--accent);

  --grain-opacity:    0.055;
  --grain-size:       190px;
  --progress-opacity: 1;

  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --type-root:             16px;
  --type-page-title:       clamp(2.65rem, 3.7vw, 3.05rem);
  --type-home-title:       clamp(4.7rem, 9vw, 7.15rem);
  --type-home-statement:   clamp(1.42rem, 2.36vw, 2.08rem);
  --type-section:          clamp(2.35rem, 5.5vw, 4.1rem);
  --type-subsection-title: clamp(1.7rem, 3.2vw, 2.2rem);
  --type-impact-title:     clamp(1.5rem, 3vw, 2rem);
  --type-case-title:       clamp(1.42rem, 3.1vw, 1.68rem);
  --type-item-title:       1.1875rem;
  --type-feature-title:    clamp(1.17rem, 2.8vw, 1.52rem);
  --type-about-statement:  clamp(1.55rem, 3.2vw, 1.76rem);
  --type-contact-prompt:   clamp(2.55rem, 5.5vw, 3.2rem);
  --type-case-next-title:  clamp(1.95rem, 5vw, 2.7rem);
  --type-error-code:       8.9rem;
  --type-error-title:      4.4rem;
  --type-perspective-index: clamp(2.55rem, 4.6vw, 3.45rem);
  --type-metric-primary:   clamp(1.85rem, 4.2vw, 2.8rem);
  --type-metric-secondary: var(--type-impact-title);
  --type-inline-arrow:     0.55em;
  --type-body-lg:          1.125rem;
  --type-body:             1rem;
  --type-body-sm:          0.9375rem;
  --type-hero-proof:       clamp(0.875rem, 1.45vw, 0.9375rem);
  --type-nav:              0.875rem;
  --type-meta:             0.875rem;
  --type-caption:          var(--type-nav);
  --type-tag:              var(--type-meta);

  --weight-body:    500;
  --weight-strong:  600;
  --weight-label:   700;
  --weight-heading: 800;

  --leading-solid: 1;
  --leading-title: 1.06;
  --leading-tight: 1.18;
  --leading-label: 1.15;
  --leading-body:  1.65;
  --leading-display: 0.88;
  --leading-display-tight: 0.92;
  --leading-statement: 1.14;
  --leading-heading-panel: 1.12;
  --leading-item: 1.28;
  --leading-brief: 1.4;
  --leading-data: 1.3;
  --leading-label-tall: 1.35;
  --leading-copy-compact: 1.5;
  --leading-copy-medium: 1.56;
  --leading-caption: 1.58;
  --leading-ui: 1.2;
  --leading-error-code: 0.82;

  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;

  --measure-heading:        22ch;
  --measure-lede:           62ch;
  --measure-body:           66ch;
  --measure-hero-statement: 24ch;
  --measure-hero-proof:     48ch;
  --measure-contact-prompt: 33rem;
  --measure-pv-title:       21ch;
  --measure-pv-body:        39ch;
  --measure-viz-head:       42rem;
  --measure-viz-decision:   58rem;

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-7:  1.75rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --space-2xs: var(--space-1);
  --space-xs:  var(--space-2);
  --space-sm:  var(--space-3);
  --space-md:  var(--space-4);

  --stack-compact: var(--space-3);
  --stack-md:      var(--space-4);
  --stack-lg:      clamp(var(--space-5), 2.5vw, var(--space-7));
  --stack-xl:      clamp(var(--space-7), 3.2vw, var(--space-10));

  --sec-head-gap: clamp(var(--space-6), 3vw, var(--space-8));

  --action-rule:          1.5px;
  --action-arrow-gap:     var(--space-2);
  --action-arrow-shift:   3px;
  --action-line-w:        var(--space-5);
  --action-line-w-hover:  var(--space-6);

  --tag-gap:       var(--space-2);
  --tag-gap-tight: var(--space-1);
  --tag-pad:       var(--space-1) var(--space-2);

  --card-pad:    clamp(var(--space-5), 2.05vw, var(--space-6));
  --card-pad-sm: clamp(var(--space-4), 4vw, var(--space-5));
  --panel-pad:   clamp(var(--space-8), 3.7vw, var(--space-12)) clamp(var(--space-7), 3.1vw, var(--space-10));

  --case-card-pad:                    clamp(var(--space-4), 1.8vw, var(--space-5));
  --case-card-gap:                    var(--space-2);
  --case-card-body-gap:               var(--space-3);
  --case-card-impact-gap:             var(--space-1);
  --case-card-link-gap:               clamp(var(--space-3), 1.5vw, var(--space-4));
  --case-wide-thumb:                  34%;
  --case-num-col:  clamp(var(--space-10), 4.5vw, var(--space-14));
  --case-matrix-col: 9rem;
  --figure-sm-w:     26rem;
  --figure-sm-vw:    55vw;
  --case-card-thumb-ratio:            21 / 9;
  --case-card-thumb-focus-x:          50%;
  --case-card-thumb-focus-y:          50%;
  --case-card-thumb-focus-y-low:      62%;
  --case-card-label-gap:              var(--space-1);
  --case-card-label-rule-w:           var(--space-3);
  --case-card-label-rule-h:           0.09375rem;
  --case-card-label-rule-opacity:     0.7;
  --case-card-link-icon-gap:          var(--action-arrow-gap);
  --case-card-link-rule:              var(--action-rule);
  --case-card-link-pad-block-end:     var(--space-1);
  --case-card-accent-rule:            2px;
  --case-card-hover-shift:            var(--action-arrow-shift);
  --case-impact-label-rule-w:         var(--space-6);
  --case-impact-label-rule-h:         1px;
  --case-impact-label-rule-opacity:   0.75;
  --toc-rule-opacity:                 0.72;

  --control-pad:         var(--space-2) var(--space-3);
  --control-pad-compact: var(--space-1) var(--space-2);
  --drawer-link-pad:     var(--space-2) var(--space-3);
  --action-pad:          var(--space-3) var(--space-4);

  --case-accent-pad: var(--space-2) 0 var(--space-2) var(--space-3);

  --viz-panel-pad:    clamp(var(--space-5), 2.7vw, var(--space-8));
  --viz-card-pad:     clamp(var(--space-4), 2vw, var(--space-6));
  --viz-gap:          clamp(var(--space-2), 1.5vw, var(--space-4));
  --viz-transfer-pad: clamp(var(--space-8), 3.5vw, var(--space-10));

  --max:              1080px;
  --max-content-narrow: 780px;
  --contact-col-min:  24rem;
  --nav-height: 68px;
  --control-size:              38px;
  --control-size-mobile:       40px;
  --menu-control-size:         36px;
  --control-min:               44px;
  --contact-control-min:       60px;
  --contact-control-min-mobile: 54px;

  --icon-size-sm:  14px;
  --icon-size:     16px;
  --icon-size-lg:  18px;
  --icon-size-sun: 17px;

  --hamburger-bar-w:     20px;
  --hamburger-bar-h:     1.5px;
  --hamburger-bar-shift: calc(var(--hamburger-bar-h) + var(--space-1));
  --scrollbar-size:      5px;

  --nav-drawer-shift: -8px;

  --about-img-max:        280px;
  --about-img-max-mobile: 225px;
  --case-toc-w:           12.5rem;
  --toc-scroll-offset:    1.5rem;

  --side: clamp(var(--space-7),  5vw, var(--space-14));
  --sp:   clamp(var(--space-8),  4vw, var(--space-12));

  --section-y:        clamp(var(--space-7),  3.825vw, var(--space-12));
  --case-section-gap: clamp(var(--space-8),  4.2vw,   var(--space-12));
  --case-section-y:   calc(var(--case-section-gap) / 2);
  --hero-y:           clamp(var(--space-16), 6.4vw,   var(--space-20));
  --page-top-y:       clamp(var(--space-12), 4.8vw,   var(--space-16));
  --contact-y:        clamp(var(--space-12), 6.4vw,   var(--space-20));
  --content-gap:      clamp(var(--space-10), 5vw,     var(--space-16));
  --grid-gap:         clamp(var(--space-4),  2vw,     var(--space-6));
  --case-visual-ratio:       4 / 3;
  --case-visual-stack-ratio: 16 / 9;
  --case-visual-stack-max:   clamp(20rem, 58vw, 32rem);
  --nav-gap:        var(--space-3);
  --nav-link-gap:   clamp(var(--space-1), 0.45vw, var(--space-2));
  --perspective-gap: clamp(var(--space-6), 3.2vw, var(--space-10));

  --radius-md: 7.5px;

  --radius-focus:   var(--radius-md);
  --radius-control: var(--radius-md);
  --radius-surface: var(--radius-md);
  --radius-chip:    var(--radius-md);

  --shadow-card:        0 10px 30px color-mix(in srgb, var(--navy) 3.5%, transparent);
  --shadow-card-hover:  0 14px 36px color-mix(in srgb, var(--navy) 6.5%, transparent);
  --shadow-card-mobile: 0 8px 22px color-mix(in srgb, var(--navy) 4.8%, transparent);
  --shadow-media:       0 12px 34px color-mix(in srgb, var(--navy) 5%, transparent);
  --shadow-visual-drop: 0 18px 46px color-mix(in srgb, var(--navy) 11%, transparent);
  --shadow-panel-drop:  0 20px 54px color-mix(in srgb, var(--navy) 13%, transparent);

  --accent:       var(--blue);
  --accent-muted: var(--blue-mid);
  --accent-label: var(--blue-light);

  --z-section: 60;
  --z-drawer:  199;
  --z-nav:     1000;
  --z-overlay: 9999;

  --duration-instant:  0.1s;
  --duration-fast:     0.18s;
  --duration-medium:   0.26s;
  --duration-hero:     0.3s;
  --duration-image:    0.6s;
  --duration-filter:   0.4s;
  --ease-standard:    cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-decelerate:  cubic-bezier(0.23, 1, 0.32, 1);

  --lift-card:    -3px;
  --lift-control: -1px;

  --focus-ring:        3px solid var(--accent);
  --focus-ring-invert: 3px solid color-mix(in srgb, var(--panel-text) 72%, transparent);
  --focus-offset:      3px;
}

[data-theme="night"] {
  color-scheme: dark;

  --cream:      #07101D;
  --cream-nav:  #050B14;
  --off-white:  #0D1828;
  --navy:       #F4F0E8;
  --blue:       #9EC9F2;
  --blue-mid:   #AFCBEC;
  --blue-light: #85B8EC;
  --blue-pale:  #304A68;

  --text:   #F4F0E8;
  --muted:  #B8C6D8;
  --subtle: #91A7BF;

  --selection-bg:   color-mix(in srgb, var(--accent) 32%, transparent);
  --selection-text: var(--text);

  --border:         #24364E;
  --border-dark:    #334960;
  --border-surface: color-mix(in srgb, var(--blue-light) 24%, transparent);
  --rule-faint:     color-mix(in srgb, var(--blue-light) 22%, transparent);

  --btn-bg:           color-mix(in srgb, var(--blue) 8%, transparent);
  --btn-bg-hover:     color-mix(in srgb, var(--blue) 15%, transparent);
  --btn-border:       color-mix(in srgb, var(--navy) 42%, transparent);
  --btn-border-hover: color-mix(in srgb, var(--navy) 62%, transparent);

  --tag-text:   var(--subtle);
  --tag-bg:     color-mix(in srgb, var(--blue) 3.5%, transparent);
  --tag-border: color-mix(in srgb, var(--blue) 20%, transparent);

  --panel-bg:                   var(--cream-nav);
  --panel-text:                 var(--text);
  --panel-muted:                var(--muted);
  --panel-soft:                 var(--blue-mid);
  --panel-line-soft:            color-mix(in srgb, var(--navy) 12%, transparent);
  --panel-control-bg:           color-mix(in srgb, var(--navy) 7%, transparent);
  --panel-control-bg-hover:     color-mix(in srgb, var(--navy) 13%, transparent);
  --panel-control-border:       color-mix(in srgb, var(--navy) 20%, transparent);
  --panel-control-border-hover: color-mix(in srgb, var(--navy) 36%, transparent);

  --nav-glass-bg: color-mix(in srgb, var(--cream-nav) 92%, transparent);
  --nav-glass-border: color-mix(in srgb, var(--blue-light) 24%, transparent);
  --nav-glass-shadow:
    0 12px 36px color-mix(in srgb, var(--tone-black) 32%, transparent);

  --nav-drawer-glass-bg: color-mix(in srgb, var(--cream-nav) 96%, transparent);
  --nav-drawer-glass-border: var(--nav-glass-border);
  --nav-drawer-glass-shadow:
    0 16px 38px color-mix(in srgb, var(--tone-black) 28%, transparent);
  --nav-logo-text: var(--text);
  --nav-logo-text-hover: var(--accent);
  --nav-link-text: var(--muted);
  --nav-link-text-hover: var(--text);
  --nav-link-text-active: var(--text);
  --nav-link-bg-hover: color-mix(in srgb, var(--navy) 8%, transparent);
  --nav-control-text: var(--text);

  --shadow-card:        0 10px 28px color-mix(in srgb, var(--tone-black) 10%, transparent);
  --shadow-card-hover:  0 14px 38px color-mix(in srgb, var(--tone-black) 16%, transparent);
  --shadow-card-mobile: 0 8px 24px color-mix(in srgb, var(--tone-black) 11%, transparent);
  --shadow-media:       0 12px 34px color-mix(in srgb, var(--tone-black) 14%, transparent);
  --shadow-visual-drop: 0 18px 46px color-mix(in srgb, var(--tone-black) 30%, transparent);
  --shadow-panel-drop:  0 22px 58px color-mix(in srgb, var(--tone-black) 30%, transparent);

  --progress-opacity: 0.65;
}

@media (max-width: 820px) {
  :root {
    --grain-opacity: 0.04;
    --grain-size:    240px;

    --side:       clamp(var(--space-5), 5vw,   var(--space-10));
    --sp:         clamp(var(--space-6), 3.6vw,  var(--space-8));
    --hero-y:     clamp(var(--space-12), 8.8vw, var(--space-16));
    --page-top-y: clamp(var(--space-6),  5.9vw, var(--space-12));
    --contact-y:  clamp(var(--space-10), 6.4vw, var(--space-16));
    --content-gap: clamp(var(--space-8), 5vw,   var(--space-12));
    --grid-gap:   var(--space-4);

    --stack-md:      var(--space-3);
    --stack-lg:      clamp(var(--space-4), 3.4vw, var(--space-5));
    --stack-xl:      clamp(var(--space-5), 3.5vw, var(--space-7));
    --sec-head-gap:  clamp(var(--space-6), 3vw, var(--space-7));

    --card-pad:   var(--card-pad-sm);
    --case-card-pad: clamp(var(--space-4), 4.5vw, var(--space-5));
    --case-accent-pad: var(--space-2) 0 var(--space-2) var(--space-2);
    --panel-pad:  clamp(var(--space-7), 5.4vw, var(--space-8)) clamp(var(--space-5), 4.5vw, var(--space-7));

    --type-page-title:       clamp(2.12rem, 5.2vw, 2.65rem);
    --type-home-title:       clamp(3.25rem, 9.17vw, 5.5rem);
    --type-home-statement:   clamp(1.18rem, 4.8vw, 1.42rem);
    --type-case-next-title:  clamp(1.55rem, 5vw, 2.1rem);
    --type-error-code:       6.7rem;
    --type-error-title:      3.25rem;
    --type-perspective-index: clamp(2.1rem, 7vw, 2.65rem);
    --type-body-lg:          clamp(1rem, 2.8vw, 1.125rem);
    --type-body:             clamp(0.9375rem, 2.6vw, 1rem);
    --type-body-sm:          clamp(0.875rem, 2.4vw, 0.9375rem);
    --type-item-title:       clamp(1.125rem, 2.95vw, 1.1875rem);
    --leading-statement:     1.2;
  }
}

@media (max-width: 480px) {
  :root {
    --side:       clamp(var(--space-4), 4.25vw, var(--space-5));
    --hero-y:     clamp(var(--space-12), 10vw,  var(--space-16));
    --page-top-y: clamp(var(--space-5),  5.5vw, var(--space-8));
    --contact-y:  clamp(var(--space-8),  6.4vw, var(--space-10));

    --stack-md: var(--space-3);

    --tag-gap:   var(--space-1);
    --tag-pad:   var(--space-1) var(--space-1);

    --type-home-title: clamp(3.15rem, 16vw, 4.45rem);
    --type-case-next-title: clamp(1.35rem, 5vw, 1.75rem);
    --type-error-code: 5.3rem;
    --type-error-title: 2.55rem;
    --type-perspective-index: clamp(1.85rem, 8vw, 2.2rem);
    --leading-statement: var(--leading-tight);
  }
}