/* tokens.css ============================================================
   Nambisan's — "Joyful Table". Built on the Brand Guidelines (V.1 2025):
   the brand's own Maize yellow leads, MSU Green speaks, bright Pantone
   Green and the Accent Gold add energy. Three companion colours were chosen
   to sit happily beside yellow and green without touching the logo:
     Chilli Coral  — sparks, stickers and highlights (never body text)
     Curry-leaf Mint — a cool, fresh ground that lets yellow breathe
     Honey Amber   — the warm ground of the honey pages
   Proportions follow the guideline: primaries ~50%, secondaries ~30%,
   accents ~20%.
   ====================================================================== */
:root {
  /* Brand palette (Brand Guidelines pp. 34–36) */
  --maize: #f4c55c;          /* Primary I   — Pantone 141 C  */
  --msu-green: #124734;      /* Primary II  — Pantone 3435 C */
  --leaf: #00b651;           /* Primary III — Pantone 7481 C */
  --gold: #fcb820;           /* Accent      — Pantone 1235 C */
  --cocoa: #4f2a1c;          /* Caput Mortuum — Pantone 4625 C */
  --cream: #fff0dc;          /* Papaya Whip — Pantone 9064 C */
  --coconut: #945f37;        /* Coconut — Pantone 4635 C */
  --cadmium: #01662a;        /* Cadmium Green — Pantone 349 C */

  /* Companion colours */
  --coral: #f26b4f;
  --coral-soft: #ffdccf;
  --mint: #ddf2e3;
  --amber: #f5ad3c;
  --honey-deep: #3d2015;

  /* Roles */
  --ink: var(--msu-green);
  --ink-soft: #3f5a4c;
  --on-dark: var(--cream);
  --on-dark-soft: rgba(255, 240, 220, .84);
  --line: var(--msu-green);
  --line-soft: rgba(18, 71, 52, .18);
  --error: #b42318;

  /* Type: Museo 700/500 (headings) when licensed, Mulish until then;
     Merriweather Light for reading. */
  --font-display: "Museo", "Mulish", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Merriweather", Georgia, "Times New Roman", serif;
  --type-mega: clamp(3rem, 1.6rem + 6.2vw, 6.5rem);
  --type-display: clamp(2.6rem, 1.7rem + 4.4vw, 5rem);
  --type-h2: clamp(2.1rem, 1.5rem + 2.8vw, 3.75rem);
  --type-subhead: clamp(1.3rem, 1.15rem + .7vw, 1.65rem);
  --type-body: clamp(1rem, .97rem + .15vw, 1.0625rem);
  --type-small: .9375rem;
  --type-caption: .78rem;
  --leading-tight: 1.02;
  --leading-heading: 1.1;
  --leading-body: 1.7;
  --measure: 62ch;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;
  --sec: var(--space-8);
  --sec-lg: var(--space-9);

  /* Frame */
  --maxw: 1240px;
  --maxw-wide: 1440px;
  --gut: 24px;
  --header-h: 104px;
  --header-h-stuck: 74px;

  /* Shape */
  --rad-sm: 12px;
  --rad: 24px;
  --rad-lg: 36px;
  --pill: 999px;
  --stroke: 2px;
  --pop: 5px 5px 0 var(--msu-green);
  --pop-lg: 8px 8px 0 var(--msu-green);
  --soft: 0 18px 40px -24px rgba(18, 71, 52, .45);

  /* Motion */
  --dur: 350ms;
  --dur-slow: 700ms;
  --ease: cubic-bezier(.33, 1, .68, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (max-width: 1080px) {
  :root { --header-h: 74px; --header-h-stuck: 66px; }
}
@media (max-width: 900px) {
  :root { --sec: 76px; --sec-lg: 92px; --gut: 20px; --pop: 4px 4px 0 var(--msu-green); --pop-lg: 6px 6px 0 var(--msu-green); }
}
@media (max-width: 480px) {
  :root { --sec: 64px; --sec-lg: 76px; --gut: 16px; --rad: 20px; }
}