/* ============================================================================
   THE HOPKINS INSTITUTE — DESIGN TOKENS
   Settled in _site-plan/02-creative-direction.md PART 3 / PART 4 / PART 6.
   Identical across all three concepts: the brand decisions are not the variable.
   Every contrast pair here was verified. See CONCEPTS.md for the table.
   ========================================================================= */
@import url("../assets/fonts/fonts.css");

:root{
  /* ---- brand four (fixed) ------------------------------------------------ */
  --ink:        #000000;   /* body text on light. nothing else                */
  --plum:       #492557;   /* THE dark ground                                 */
  --purple:     #9A7BAF;   /* rules, separators, >=24px text only             */
  --lavender:   #CBAED0;   /* reversed body on plum. never text on light      */

  /* ---- warm additive (INVENTED — brief D6 / RULE 5) --------------------- */
  --newsprint:   #F7F3EA;  /* default page ground   · #000 18.96:1 · plum 11.25:1 */
  --newsprint-2: #EFE8DA;  /* second light ground   · #000 17.23:1 · plum 10.22:1 */
  --gold:        #E0AE3C;  /* accent ON DARK ONLY   · on plum 6.10:1 both ways    */
  --gold-lift:   #EFC96B;  /* gold hover on plum    · 7.85:1                      */
  --ochre:       #8A5A12;  /* accent on light       · on newsprint 5.34:1         */
  --terracotta:  #9E4526;  /* second warm, sparing  · on newsprint 5.69:1         */
  --warm-grey:   #6B5A62;  /* meta / dates / credits· on newsprint 5.81:1         */
  --plum-deep:   #33193D;  /* footer, nav panel, deepest band · white 15.59:1     */

  /* ---- the nib gradient: the brand's only gradient, used as punctuation -- */
  --nib: linear-gradient(90deg,#CBAED0 0%,#9A7BAF 45%,#492557 100%);
  --nib-v: linear-gradient(180deg,#CBAED0 0%,#9A7BAF 45%,#492557 100%);
  /* reversed, for dark grounds — the plum end of the gradient vanishes on plum */
  --nib-rev: linear-gradient(90deg,#492557 0%,#9A7BAF 45%,#CBAED0 100%);
  --nib-rev-v: linear-gradient(180deg,#492557 0%,#9A7BAF 45%,#CBAED0 100%);

  /* Two-axis photo scrim. Bunche's measured vertical .85→.20, re-tinted to plum
     and given a third stop, PLUS a directional wash from the gutter so the
     copy corner is decisively dark whatever photograph is swapped in. Verified:
     cream #F7F3EA over the copy corner clears AA at display sizes and body. */
  --photo-scrim: linear-gradient(to top,
                   rgba(41,19,50,.90) 0%,
                   rgba(41,19,50,.58) 45%,
                   rgba(41,19,50,.16) 100%);
  --photo-scrim-x: linear-gradient(to right,
                   rgba(41,19,50,.80) 0%,
                   rgba(41,19,50,.46) 38%,
                   rgba(41,19,50,0)   74%);

  /* ---- families ---------------------------------------------------------- */
  --display: "Abhaya Libre", "Iowan Old Style", Georgia, serif;
  --label:   "Archivo", -apple-system, "Segoe UI", sans-serif;
  --body:    "Source Serif 4", Georgia, "Times New Roman", serif;

  /* ---- fluid type scale (endpoints = 390px / 1440px) -------------------- */
  --fs-tagline:  clamp(2.25rem, 1.36rem + 3.66vw, 3.75rem);  /* 36 → 60 */
  --fs-h1:       clamp(1.938rem, 1.302rem + 2.61vw, 3rem);   /* 31 → 48 */
  --fs-h2:       clamp(1.625rem, 1.179rem + 1.83vw, 2.375rem);/* 26 → 38 */
  --fs-legacy:   clamp(1.625rem, 1.104rem + 2.14vw, 2.5rem); /* 26 → 40 */
  --fs-quote:    clamp(1.313rem, 1.045rem + 1.10vw, 1.875rem);/* 21 → 30 */
  --fs-lead-card:clamp(1.5rem, 1.351rem + 0.61vw, 1.875rem); /* 24 → 30 */
  --fs-card:     clamp(1.188rem, 1.163rem + 0.10vw, 1.25rem);/* 19 → 20 */
  --fs-card-sm:  clamp(1.125rem, 1.1rem + 0.10vw, 1.188rem); /* 18 → 19 */
  --fs-deck:     clamp(1.188rem, 1.062rem + 0.31vw, 1.375rem);/* 19 → 22 */
  --fs-body:     clamp(1.125rem, 1.088rem + 0.10vw, 1.188rem);/* 18 → 19 */
  --fs-excerpt:  clamp(1.062rem, 1.037rem + 0.10vw, 1.125rem);/* 17 → 18 */
  --fs-eyebrow:  clamp(0.75rem, 0.725rem + 0.10vw, 0.813rem); /* 12 → 13 */
  --fs-nav:      1.0625rem;   /* 17 */
  --fs-btn:      0.875rem;    /* 14 */
  --fs-meta:     0.8125rem;   /* 13 */
  --fs-chip:     0.75rem;     /* 12 */
  --fs-credit:   0.6875rem;   /* 11 */
  --fs-wide:     clamp(1.25rem, 1.131rem + 0.49vw, 1.5rem);   /* 20 → 24 */

  /* ---- spacing (8px base) ---------------------------------------------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:96px; --s11:128px;

  --wrap: 1320px;
  --pad-x: 20px;
  --gutter: 16px;

  /* section padding — dark bands get +16px, reversed type needs the air */
  --band-light: 48px;
  --band-dark:  56px;

  /* ---- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2,.8,.3,1);
  --t-fast: 150ms; --t-mid: 250ms; --t-slow: 500ms;
}

@media (min-width:600px){ :root{ --pad-x:32px; --gutter:24px;
  --band-light:64px; --band-dark:72px; } }
@media (min-width:1024px){ :root{ --pad-x:48px; --gutter:32px;
  --band-light:96px; --band-dark:112px; } }
@media (min-width:1440px){ :root{ --pad-x:64px; } }