/* /site/assets/css/variables.css */
:root {
  /* Brand Palette — L8 The Butterfly Layer (airier) */
  --pearl:            #FCFCFD;   /* softer canvas */
  --blush:            #F7EAF2;   /* light warm wash */
  --orchid:           #C98BCB;   /* elegant accent */
  --silver:           #ECEEF3;   /* lighter lines/borders */
  --lavender-ink:     #6A5FB2;   /* accent ink */

  /* Neutrals */
  --ink-900:          #23232A;
  --ink-800:          #2C2C34;
  --ink-700:          #3A3A44;
  --ink-500:          #5A5A66;
  --ink-300:          #9AA0AD;
  --ink-150:          #E6E8EF;

  /* Backgrounds — B2+: medium+ blush, airy but clearly pink */
  --bg:               var(--pearl);
  --surface:          #FFFFFF;
  --surface-tint:     color-mix(in oklab, var(--blush) 26%, white);

  /* Hero wash — bump blush to ~48% at the top */
  --hero-tint:        linear-gradient(
                        180deg,
                        color-mix(in oklab, var(--blush) 52%, white) 0%,    
                        color-mix(in oklab, var(--pearl) 90%, white) 100%
                      );

  /* Section wash (page headers / highlights) — stronger but under hero */
  --section-tint:     linear-gradient(
                        180deg,
                        color-mix(in oklab, var(--blush) 34%, white) 0%,
                        color-mix(in oklab, var(--pearl) 96%, white) 100%
                      );

  /* UI tint for subtle fills */
  --ui-tint:          color-mix(in oklab, var(--blush) 30%, white);

  /* Hero graphic size (ensure presence) */
  --hero-graphic-size: clamp(560px, 42vw, 880px);

  /* Typography */
  --font-sans:        ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --font-serif:       "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-mono:        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type scale & spacing */
  --step--1: clamp(0.86rem, 0.84rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.00rem, 0.98rem + 0.25vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.50vw, 1.35rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.70rem);
  --step-3:  clamp(1.80rem, 1.50rem + 1.20vw, 2.20rem);
  --step-4:  clamp(2.20rem, 1.80rem + 1.80vw, 2.80rem);
  --step-5:  clamp(2.75rem, 2.10rem + 2.40vw, 3.60rem);

  --space-2xs:  0.25rem;
  --space-xs:   0.5rem;
  --space-sm:   0.75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4.5rem;

  /* Radius & Shadow */
  --radius-sm:        8px;
  --radius-md:        14px;
  --radius-lg:        22px;
  --shadow-soft:      0 6px 20px rgba(35, 35, 42, 0.05);
  --shadow-hover:     0 10px 28px rgba(35, 35, 42, 0.08);

  /* Borders & focus ring */
  --border:           1px solid var(--silver);
  --focus-ring:       0 0 0 3px color-mix(in oklab, var(--orchid) 30%, white);

  /* Z-index stacks */
  --z-header:         1000;
  --z-overlay:        1100;
  --z-tooltip:        1200;

  --banner-offset: 0px;
}

/* Dark mode preserved for future use (not active)
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #111214;
    --surface:      #17181B;
    --ink-900:      #F5F6FA;
    --ink-800:      #E9EAF1;
    --ink-700:      #D9DBE6;
    --ink-500:      #B9BECD;
    --ink-300:      #8E95A7;
    --ink-150:      #2A2D36;
    --silver:       #2A2D36;
    --surface-tint: color-mix(in oklab, var(--lavender-ink) 7%, #17181B);
    --hero-tint:    linear-gradient(180deg, #141519 0%, #121318 100%);
    --focus-ring:   0 0 0 3px color-mix(in oklab, var(--orchid) 35%, black);
  }
}
*/