/* ============================================================
   Horizon Design System — canonical tokens
   Source: project-level design-system/horizon-tokens.css
   Created by Claude design and grounded in CIFS website screenshots.

   This vendored copy is loaded by the static mockup and by Cloudflare Pages.
   Keep it in sync with ../design-system/horizon-tokens.css when the canonical
   project design system changes.
   ============================================================ */

:root {
  /* --- Core palette --- */
  --paper:  #F8F6F2;
  --sink:   #EFEDEA;
  --mute:   #9D9B9A;
  --slate:  #414042;
  --ink:    #0D0D0D;
  --indigo: #5324D6;
  --indigo-deep: #3F17AC;
  --iris:   #6B5BD6;

  /* --- Neutrals & borders --- */
  --line:        #E4E1DB;
  --line-inset:  #DAD6CF;
  --text-2:      #3B3A39;
  --text-3:      #6F6D6A;
  --text-4:      #8A8884;

  /* --- Expressive spectrum --- */
  --ember: #E0413C;
  --amber: #E8743B;
  --gold:  #F2B33C;
  --teal:  #1FA89B;
  --peach: #F2B894;
  --pink:  #C98EB6;
  --spectrum: linear-gradient(90deg, #E0413C, #E8743B, #F2B33C, #1FA89B, #6B5BD6);

  /* --- Semantic mapping --- */
  --bg:            var(--paper);
  --bg-recessed:   var(--sink);
  --text:          var(--ink);
  --text-muted:    var(--text-3);
  --border:        var(--line);
  --accent:        var(--indigo);
  --accent-press:  var(--indigo-deep);
  --on-accent:     #FFFFFF;
  --selection-bg:  var(--indigo);

  /* --- Typography --- */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-serif:   'Spectral', Georgia, serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-display:  clamp(44px, 6.4vw, 92px);
  --fs-mega:     120px;
  --fs-h1:       64px;
  --fs-h2:       34px;
  --fs-h3:       24px;
  --fs-lead:     22px;
  --fs-body:     16px;
  --fs-small:    13px;
  --fs-label:    12px;
  --fs-micro:    11px;

  --tracking-label: 0.2em;
  --leading-body:   1.55;
  --leading-tight:  1.02;

  /* --- Shape & layout --- */
  --radius:      6px;
  --radius-pill: 999px;
  --maxw:        1140px;
  --pad-x:       40px;
}

::selection {
  background: var(--selection-bg);
  color: #fff;
}

::-moz-selection {
  background: var(--selection-bg);
  color: #fff;
}