/* Design tokens: colors, typography, motion, z-index, hero/chapter vars */
:root {
  /* Palette tokens */
  /* Updated brand palette */
  /* Main surfaces */
  --cream:   #F2EBC2; /* light main */
  --tan:     #DCCCA3; /* light alt */
  --deep-blue: #131936; /* dark main */
  --deep-red:  #4E0000; /* dark alt */
  --deep-olive:#292E1E; /* dark alt 2 */

  /* Accents / details / typography tints */
  --sage:     #BCBD8B;
  --slate:    #344966; /* accent + underline */
  --lilac:    #889EAA; /* muted text tint */
  --garnet:   #360E24; /* deep burgundy */
  --gold:     #BFCC94; /* soft green-gold */
  --steel:    #2F4550; /* secondary accent */
  --midnight: #0D1821; /* deep navy for details */
  --ink:      #111111;
  --ink-2:    #2A2A2A;

  /* Chapter palette seeds */
  --blue:     var(--deep-blue); /* About */
  --teal:     var(--deep-red);  /* Inspiration */

  /* Chapter palettes (override these with your brand) */
  --about-bg:   var(--blue);
  --about-fg:   #ffffff;
  --inspo-bg:   var(--teal);
  --inspo-fg:   #ffffff;
  --contact-bg: var(--deep-olive);
  --contact-fg: #ffffff;

  /* Bridge gradient stop controls */
  --bridge-stop-blue: 52%;
  --bridge-stop-mix:  78%;

  /* Mapped tokens (compat) */
  --bg: var(--hero-bg);
  --text: #111111;
  --muted: var(--lilac);
  --accent: var(--slate);
  --hero-bg: var(--cream);
  --hero-bg-rgb: 242,235,194; /* for rgba() tinting */
  --hero-max: 1600px; /* max width for hero media */
  --hero-mask-start: 84%; /* stronger letterbox for more noticeable reveal */
  --grid-gap: clamp(12px, 1.5vw, 28px);
  --container: min(1080px, 92vw);

  /* Typography scale */
  --display: "Cinzel Decorative", "Bodoni Moda", ui-serif, Georgia, serif;
  --serif-strong: "Bodoni Moda", ui-serif, Georgia, serif;
  --serif: "EB Garamond", ui-serif, Georgia, serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --lh-tight: 1.05;
  --lh-normal: 1.5;
  --fs-xxl: clamp(48px, 10vw, 132px);
  --fs-xl: clamp(28px, 5vw, 64px);
  --fs-lg: clamp(20px, 2.2vw, 28px);
  --fs-md: clamp(16px, 1.2vw, 18px);
  --fs-sm: 14px;

  /* Header theme + motion */
  --fg: var(--text);
  --fg-inverse: #111;
  --ease: cubic-bezier(.22,1,.36,1);

  /* Header height fallback + variable */
  --header-h-fallback: 64px;
  --header-h: var(--header-h-fallback);

  /* Elastic masthead docking */
  --dock: 0;        /* 0..1 scroll progress for docking */
  --dockX: 0px;     /* computed in JS */
  --dockY: 0px;     /* computed in JS */
  --dockScale: .35; /* final scale of masthead in header */

  /* Header theme colors for readability */
  --header-bg-dark: rgba(17,17,17,0.92);
  --header-fg-dark: #ffffff;
  --header-bg-light: rgba(255,255,255,0.96);
  /* Split progress defaults to avoid flashes before JS kicks in */
  --bridge: 0;
  --chapter: 0;
  --header-fg-light: #111111;

  /* Hero reveal start (0%..100%). Set to 0 to avoid any clipping */
  --hero-clip-start: 0%;

  /* Hard split colors for About transition */
  --clr-light: var(--hero-bg, #F2EBC2);
  --clr-blue:  var(--about-bg, #131936);

  /* Bridge/chapter progress + layering */
  --wipe: 0;  /* 0..1, split reveal */
  --pre:  0;  /* 0..0.35, non-decreasing pre-advance */
  --z-nav: 10;
  --z-bridge: 7;
  --z-split: 6;
  --z-content: 1;
}

@supports (height: 1svh) {
  :root { --header-h: clamp(56px, 8svh, 80px); }
}

/* Reduce hero reveal distance on small screens */
@media (max-width: 768px){
  :root{ --hero-clip-start: 72%; --hero-mask-start: 76%; }
}