/* ==========================================================================
   Jodl Gayatin — design tokens
   Black, navy, warm white and clear blue. Change values here, never hard-code them in components.
   ========================================================================== */

:root {
  --navy: #14243B;
  --slate: #263D59;
  --accent: #78AEF5;
  --accent-hover: #A4C9FA;

  /* ---- Colour -------------------------------------------------------- */
  --ink: #101216;                       /* warm near-black */
  --paper: #F5F3EE;
  --band: #E9EDF2;                      /* light grey section band */
  --ink-70: rgba(16, 18, 22, 0.74);      /* secondary text on light (passes AA) */
  --ink-50: rgba(16, 18, 22, 0.55);      /* giant numerals: 3.3:1 on white and band (large text) */
  --ink-40: rgba(16, 18, 22, 0.4);      /* dashed rules, large decorative text only */
  --ink-30: rgba(16, 18, 22, 0.3);      /* giant step numbers (decorative) */
  --ink-20: rgba(38, 61, 89, 0.28);      /* hairlines, input underline */
  --paper-70: #B8C2CF; /* secondary text on dark (passes AA) */
  --paper-50: rgba(245, 243, 238, 0.58);
  --paper-40: rgba(245, 243, 238, 0.4);
  --paper-20: rgba(184, 194, 207, 0.25);

  /* Surface-aware aliases. Every component uses these, so it works on
     .surface-light, .surface-grey and .surface-dark without variants. */
  --surface: var(--paper);
  --on-surface: var(--ink);
  --muted: var(--ink-70);
  --faint: var(--ink-40);
  --line: var(--ink-20);
  --line-strong: var(--ink-40);
  --numeral: var(--ink-50);

  /* ---- Type families ------------------------------------------------- */
  --font-sans: "Satoshi", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* ---- Type scale (fluid) ------------------------------------------- */
  --fs-hero: clamp(56px, 9vw, 150px);           /* hero line 1, caps */
  --fs-hero-serif: clamp(58px, 9.6vw, 164px);   /* hero line 2, Playfair italic caps */
  --fs-statement: clamp(84px, 13vw, 230px);     /* giant Playfair word */
  --fs-h2: clamp(40px, 5.5vw, 96px);            /* section title, caps */
  --fs-h3: clamp(28px, 3.2vw, 52px);            /* card / row titles, credential rows */
  --fs-h4: clamp(21px, 1.7vw, 28px);            /* small caps titles, checklist items */
  --fs-lead: clamp(28px, 3.3vw, 56px);          /* pull lines */
  --fs-body-lg: clamp(18px, 0.35vw + 16.5px, 21px);
  --fs-body: clamp(17px, 0.15vw + 16.4px, 18px); /* never below 17px */
  --fs-small: 15px;
  --fs-label: 14px;                              /* eyebrows, index, meta */
  --fs-micro: 12px;                              /* small caps tags */
  --fs-wordmark: 14.2vw;                         /* footer "JODL GAYATIN", full bleed */

  --lh-display: 1;
  --lh-tight: 1.1;
  --lh-body: 1.55;
  --ls-display: -0.05em;
  --ls-tight: -0.03em;
  --ls-caps: 0.06em;                             /* small uppercase labels */

  /* ---- Spacing scale (4px base) ------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;
  --space-12: 200px;

  /* Fluid section rhythm: the "large void" between blocks */
  --section-y: clamp(80px, 9vw, 160px);
  --block-gap: clamp(48px, 6vw, 112px);

  /* ---- Layout -------------------------------------------------------- */
  --gutter: clamp(16px, 1.75vw, 32px);
  --container-max: 1860px;
  --container: min(100% - (var(--gutter) * 2), var(--container-max));
  --index-col: 5.5rem;   /* width of the "( 01 )" column */
  --offset: 0%;          /* where body copy starts; 36% on desktop */
  --measure: 65ch;       /* readable article width */
  --text-col: 36rem;     /* body column max width */
  --header-h: 72px;                  /* transparent header over the hero; live value: --header-h-live (set by main.js) */
  --header-h-compact: 60px;          /* solid bar after the hero */
  --cta-bar-h: 72px;                 /* mobile sticky CTA bar */

  /* ---- Shape & motion ----------------------------------------------- */
  --radius: 0;
  --hairline: 1px solid var(--line);
  --hairline-dashed: 1px dashed var(--line-strong);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur: 0.3s;
  --dur-slow: 0.6s;

  --z-header: 50;
  --z-cta: 40;
  --z-menu: 45;
  --z-skip: 100;
}

@media (max-width: 767px) {
  :root { --fs-wordmark: 13.65vw; }   /* full width of the container at 390 */
}

@media (min-width: 992px) {
  :root {
    --offset: 36%;
    --header-h: 84px;
  }
}

/* ---- Surfaces ---------------------------------------------------------
   Put one on each <section>. Components read the aliases above.
   --hairline / --hairline-dashed are redeclared here because a custom
   property that uses var() resolves where it is declared: without this
   they would keep the :root (light) line colour on dark sections. */
.surface-light {
  --surface: var(--paper);
  --on-surface: var(--ink);
  --muted: var(--ink-70);
  --faint: var(--ink-40);
  --line: var(--ink-20);
  --line-strong: var(--ink-40);
  --numeral: var(--ink-50);
  --hairline: 1px solid var(--line);
  --hairline-dashed: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--on-surface);
}

.surface-grey {
  --surface: var(--band);
  --on-surface: var(--ink);
  --muted: var(--ink-70);
  --faint: var(--ink-40);
  --line: var(--ink-20);
  --line-strong: var(--ink-40);
  --numeral: var(--ink-50);
  --hairline: 1px solid var(--line);
  --hairline-dashed: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--on-surface);
}

.surface-dark {
  --surface: var(--navy);
  --on-surface: var(--paper);
  --muted: var(--paper-70);
  --faint: var(--paper-40);
  --line: var(--paper-20);
  --line-strong: var(--paper-40);
  --numeral: var(--paper-50);
  --hairline: 1px solid var(--line);
  --hairline-dashed: 1px dashed var(--line-strong);
  background: var(--surface);
  color: var(--on-surface);
}