/* ==========================================================================
   Ankala design tokens
   The single source of truth for colour, type, spacing and motion.
   Edit here, then run `python3 brand/build.py` to copy it into the site.
   ========================================================================== */

:root {
  /* ---- Palette (approved) ---- */
  --vino:      #6C0B25;  /* wine: logo ink on light grounds, text on paper */
  --cobalto:   #003F97;  /* cobalt: the brand ground, website background  */
  --olivo:     #5B6226;  /* olive: category / secondary ground            */
  --mandarina: #FF5F39;  /* tangerine: accent, use small and sparingly    */
  --durazno:   #FCDBBA;  /* peach: logo + text on cobalt, light ground    */
  --crema:     #FCECDF;  /* cream: paper, page background for documents   */

  /* ---- Roles: dark (default, the website) ---- */
  --bg:        var(--cobalto);
  --bg-deep:   #00337C;                       /* overlays, menus over cobalt */
  --fg:        var(--durazno);
  --fg-muted:  rgb(252 219 186 / .75);  /* 4.8:1 on cobalto, passes AA for small text */
  --line:      rgb(252 219 186 / .9);
  --line-soft: rgb(252 219 186 / .35);
  --hairline:  rgb(252 219 186 / .15);
  --accent:    var(--mandarina);

  /* ---- Roles: light (documents, print, the guide) ---- */
  --paper:     var(--crema);
  --ink:       var(--vino);

  /* ---- Type ---- */
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --text-label:   12px;                          /* tags, overlines           */
  --text-small:   clamp(13px, .95vw, 16px);      /* mono body, descriptions   */
  --text-body:    18px;                          /* nav, UI text              */
  --text-title:   clamp(16px, 1.15vw, 19px);     /* brand names, caps         */
  --text-tagline: clamp(13px, 1.15vw, 19px);     /* spaced mono tagline       */
  --text-display: clamp(24px, 3vw, 40px);        /* search input, big lines   */

  --track-tagline: .32em;   /* letter-spacing for mono uppercase lines */
  --track-overline: .3em;
  --track-caps: .02em;

  /* ---- Space (8-pt base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --gutter:  clamp(16px, 4.2vw, 70px);   /* page side margin */

  /* ---- Shape ---- */
  --radius-pill: 999px;
  --radius-corner: 8px;     /* the bend in the frame brackets */
  --stroke: 1.5px;          /* icon, bracket and rule weight  */

  /* ---- Motion ---- */
  --ease: cubic-bezier(.3, .7, .2, 1);
  --dur-fast: .2s;
  --dur: .25s;
  --dur-slow: .42s;
}