/* ============================================================
   KEELARIS DESIGN TOKENS  ·  packages/ui/tokens.css
   ------------------------------------------------------------
   THE single source of truth for design values. Change a value
   here and it propagates to the marketing site AND the app —
   nothing hard-codes a colour, font or size outside this file.

   Consumed by:
     • apps/marketing  (copied in at deploy; see deploy-marketing.sh)
     • apps/web        (imported by packages/ui components)

   Layers: raw brand values → semantic aliases → type/space/motion.
   Components (base.css / React) reference the aliases, never raw hex.
   ============================================================ */

:root {
  /* — Brand palette: Navy + Gold — */
  --paper:      #FBF8F2;   /* page ground, warm off-white */
  --paper-2:    #EFE9DD;   /* raised wash / alt sections */
  --ink:        #12202F;   /* near-black, navy-leaning */
  --ink-soft:   #33404E;   /* secondary text */
  --muted:      #66707B;   /* labels, captions */
  --navy:       #23507E;   /* primary accent — buttons, links */
  --navy-deep:  #0E2135;   /* dark grounds — top nav, bands */
  --navy-tint:  #E7EDF5;   /* faint wash / hovers / hero glow */
  --gold:       #E8A11C;   /* character pop — the marigold */
  --hairline:   #E7E1D4;   /* warm hairline rules */
  --line:       #D5CDBD;   /* stronger structural line */
  --on-dark:    #F4F0E7;   /* text on dark grounds */
  --on-dark-mut:#9EB2C8;   /* muted text on dark grounds */

  /* — Semantic aliases (components reference these) — */
  --accent:      var(--navy);
  --accent-deep: var(--navy-deep);
  --accent-tint: var(--navy-tint);
  --pop:         var(--gold);
  /* legacy names kept so existing component/page CSS resolves unchanged */
  --green:      var(--navy);
  --green-deep: var(--navy-deep);
  --green-ink:  var(--navy);
  --green-tint: var(--navy-tint);
  --brass:      var(--gold);
  --marigold:   var(--gold);

  /* — Type — */
  --serif: "Iowan Old Style","Charter","Bitstream Charter","Palatino Linotype",Palatino,Cambria,Georgia,serif;
  --sans:  "Avenir Next","Segoe UI",Seravek,system-ui,-apple-system,sans-serif;
  --step--1: 0.85rem;
  --step-0:  1.0625rem;
  --step-1:  1.2rem;
  --step-2:  clamp(1.4rem, 2.2vw, 1.75rem);
  --step-3:  clamp(1.9rem, 3.6vw, 2.75rem);
  --step-4:  clamp(2.5rem, 6vw, 4.6rem);

  /* — Layout, motion, elevation — */
  --maxw:   74rem;
  --ease:   cubic-bezier(.2,.6,.2,1);
  --shadow: 0 1px 2px rgba(18,32,47,.05), 0 18px 40px -18px rgba(18,32,47,.16);
}