/* ==========================================================================
   YellowRock Consulting — design tokens
   One structure, three proposal directions (set on <html data-direction>):
     editorial (A, default) · noir (B) · modern (C)
   Every section declares a tone (data-tone="base|inverse|mist"); components
   only ever read the resolved --bg/--fg/... variables, never raw colours.
   Brand palette: client Brand Identity & Stage 2 (Nov 2026), provisional HEX.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --yr-turquoise: #149f9b;   /* graphics, large accents (2.98:1 on ivory: not for small text) */
  --yr-ochre: #e6ae23;       /* sparing highlight; text-safe on ink only (6.2:1) */
  --yr-deepteal: #126d68;    /* text-safe teal on light grounds (5.6:1 on ivory) */
  --yr-ink: #193743;         /* body type, dark surfaces (11.5:1 on ivory) */
  --yr-ivory: #f7f5f0;
  --yr-mist: #e7f1ef;

  /* --- Derived neutrals and accents ------------------------------------- */
  --yr-ink-deep: #0f2630;
  --yr-ink-raised: #21424f;
  --yr-stone: #efebe3;
  --yr-bronze: #8a6312;      /* ochre darkened for small text on light (4.9:1) */
  --yr-cream: #f3f0e8;

  /* --- Typography -------------------------------------------------------- */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Manrope", "Inter", system-ui, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --display-weight: 330;
  --display-weight-strong: 420;
  --display-tracking: -0.021em;
  --display-leading: 1.02;
  --display-scale: 1;
  --em-style: italic;

  --step--1: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-0: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
  --step-2: clamp(1.3rem, 1.15rem + 0.65vw, 1.75rem);
  --step-3: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  --step-4: clamp(2rem, 1.45rem + 2.4vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.6rem + 4vw, 5rem);
  --step-6: clamp(2.75rem, 1.35rem + 6.1vw, 6.9rem);

  /* --- Space & layout ---------------------------------------------------- */
  --gutter: clamp(1rem, 0.55rem + 2vw, 2.75rem);
  --col-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --wrap: 82.5rem;
  --section-y: clamp(4.5rem, 2.8rem + 6.5vw, 9.5rem);
  --section-y-tight: clamp(3rem, 2rem + 4vw, 6rem);
  --header-h: 5.25rem;

  /* --- Shape & motion ---------------------------------------------------- */
  --radius-s: 2px;
  --radius-m: 2px;
  --radius-l: 3px;
  --radius-btn: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 950ms;

  /* --- Tone: base (the page) --------------------------------------------- */
  --base-bg: var(--yr-ivory);
  --base-bg-alt: var(--yr-stone);
  --base-fg: var(--yr-ink);
  --base-fg-muted: #4e636b;
  --base-line: rgba(25, 55, 67, 0.14);
  --base-line-strong: rgba(25, 55, 67, 0.34);
  --base-accent: var(--yr-deepteal);
  --base-graphic: var(--yr-turquoise);
  --base-gold: var(--yr-bronze);
  --base-gold-line: var(--yr-ochre);
  --base-em: var(--yr-deepteal);
  --base-btn-bg: var(--yr-ink);
  --base-btn-fg: var(--yr-cream);
  --base-btn-bg-hover: var(--yr-deepteal);
  --base-plate: #ebe6dc;
  --base-mark-1: var(--yr-turquoise);
  --base-mark-2: var(--yr-ochre);
  --base-mark-3: var(--yr-deepteal);

  /* --- Tone: inverse (dark band) ----------------------------------------- */
  --inv-bg: var(--yr-ink);
  --inv-bg-alt: var(--yr-ink-raised);
  --inv-fg: var(--yr-cream);
  --inv-fg-muted: rgba(243, 240, 232, 0.74);
  --inv-line: rgba(243, 240, 232, 0.16);
  --inv-line-strong: rgba(243, 240, 232, 0.36);
  --inv-accent: var(--yr-ochre);
  --inv-graphic: var(--yr-turquoise);
  --inv-gold: var(--yr-ochre);
  --inv-gold-line: var(--yr-ochre);
  --inv-em: var(--yr-ochre);
  --inv-btn-bg: var(--yr-ochre);
  --inv-btn-fg: var(--yr-ink-deep);
  --inv-btn-bg-hover: #f2c24e;
  --inv-plate: var(--yr-ink-raised);
  --inv-mark-1: var(--yr-turquoise);
  --inv-mark-2: var(--yr-ochre);
  --inv-mark-3: #2c8c84;

  /* --- Tone: mist (soft panel) ------------------------------------------- */
  --mist-bg: var(--yr-mist);
  --mist-bg-alt: #dbe9e6;
  --mist-fg: var(--yr-ink);
  --mist-fg-muted: #46616a;
  --mist-line: rgba(18, 109, 104, 0.2);
  --mist-line-strong: rgba(18, 109, 104, 0.42);
  --mist-accent: var(--yr-deepteal);
  --mist-gold: var(--yr-bronze);
  --mist-em: var(--yr-deepteal);
}

/* B · Noir — quiet luxury, private-office register ------------------------ */
html[data-direction="noir"] {
  --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --display-weight: 500;
  --display-weight-strong: 600;
  --display-tracking: -0.012em;
  --display-leading: 0.98;
  --display-scale: 1.12;

  --base-bg: var(--yr-ink-deep);
  --base-bg-alt: #142f3b;
  --base-fg: #f1ede4;
  --base-fg-muted: rgba(241, 237, 228, 0.7);
  --base-line: rgba(241, 237, 228, 0.13);
  --base-line-strong: rgba(241, 237, 228, 0.32);
  --base-accent: var(--yr-ochre);
  --base-graphic: var(--yr-turquoise);
  --base-gold: var(--yr-ochre);
  --base-gold-line: var(--yr-ochre);
  --base-em: var(--yr-ochre);
  --base-btn-bg: var(--yr-ochre);
  --base-btn-fg: var(--yr-ink-deep);
  --base-btn-bg-hover: #f2c24e;
  --base-plate: #132d38;
  --base-mark-1: var(--yr-turquoise);
  --base-mark-2: var(--yr-ochre);
  --base-mark-3: #2c8c84;

  --inv-bg: #f3efe6;
  --inv-bg-alt: #e9e3d7;
  --inv-fg: var(--yr-ink);
  --inv-fg-muted: #4e636b;
  --inv-line: rgba(25, 55, 67, 0.14);
  --inv-line-strong: rgba(25, 55, 67, 0.34);
  --inv-accent: var(--yr-deepteal);
  --inv-graphic: var(--yr-turquoise);
  --inv-gold: var(--yr-bronze);
  --inv-gold-line: var(--yr-ochre);
  --inv-em: var(--yr-deepteal);
  --inv-btn-bg: var(--yr-ink);
  --inv-btn-fg: var(--yr-cream);
  --inv-btn-bg-hover: var(--yr-deepteal);
  --inv-plate: #e5ded0;
  --inv-mark-1: var(--yr-turquoise);
  --inv-mark-2: var(--yr-ochre);
  --inv-mark-3: var(--yr-deepteal);

  --mist-bg: #12313d;
  --mist-bg-alt: #173a47;
  --mist-fg: #f1ede4;
  --mist-fg-muted: rgba(241, 237, 228, 0.7);
  --mist-line: rgba(20, 159, 155, 0.28);
  --mist-line-strong: rgba(20, 159, 155, 0.55);
  --mist-accent: var(--yr-ochre);
  --mist-gold: var(--yr-ochre);
  --mist-em: var(--yr-ochre);
}

/* C · Modern — closest to the client's own stage-two board --------------- */
html[data-direction="modern"] {
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --display-weight: 600;
  --display-weight-strong: 700;
  --display-tracking: -0.038em;
  --display-leading: 1.03;
  --display-scale: 0.94;
  --em-style: normal;

  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-btn: 999px;

  --base-bg: #ffffff;
  --base-bg-alt: var(--yr-ivory);
  --base-plate: var(--yr-mist);
  --base-gold: var(--yr-deepteal);
  --base-em: var(--yr-deepteal);
  --base-btn-bg-hover: var(--yr-deepteal);
}