/* KOVU — Design tokens (colors + type + spacing + fonts).
   Transcribed verbatim from the brand file / design-system bundle. */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Family — always reference this token, never the literal name */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  /* ── Base palette ───────────────────────────────────────────── */
  --kovu-blue:        #003CE5;
  --kovu-blue-bright: #0066FF;
  --kovu-blue-deep:   #0030B8;
  --kovu-black:       #15110D;
  --kovu-white:       #FFFFFF;
  --kovu-off-white:   #F5F3EF;
  --kovu-grey:        #D9D9D9;
  --kovu-warm-grey:   #423E3B;

  --kovu-ink-70: rgba(21,17,13,0.70);
  --kovu-ink-55: rgba(21,17,13,0.55);
  --kovu-ink-12: rgba(21,17,13,0.12);
  --kovu-paper-75: rgba(255,255,255,0.75);
  --kovu-paper-55: rgba(255,255,255,0.55);
  --kovu-paper-15: rgba(255,255,255,0.15);

  /* ── Semantic aliases ───────────────────────────────────────── */
  --surface-light:  var(--kovu-white);
  --surface-soft:   var(--kovu-off-white);
  --surface-dark:   var(--kovu-black);
  --surface-brand:  var(--kovu-blue);
  --surface-card:   var(--kovu-white);

  --text-strong:    var(--kovu-black);
  --text-body:      var(--kovu-black);
  --text-muted:     var(--kovu-ink-55);
  --text-accent:    var(--kovu-blue);

  --text-on-dark:        var(--kovu-white);
  --text-on-dark-muted:  var(--kovu-paper-55);
  --text-on-brand:       var(--kovu-white);
  --text-on-brand-muted: var(--kovu-paper-75);

  --border-subtle:  var(--kovu-ink-12);
  --border-strong:  var(--kovu-black);
  --divider:        var(--kovu-grey);

  --action-bg:        var(--kovu-blue);
  --action-bg-hover:  var(--kovu-blue-bright);
  --action-bg-active: var(--kovu-blue-deep);
  --action-fg:        var(--kovu-white);
  --focus-ring:       var(--kovu-blue-bright);

  /* ── Weights ────────────────────────────────────────────────── */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  /* ── Type scale ─────────────────────────────────────────────── */
  --text-display: 128px;
  --text-h1:       64px;
  --text-h2:       36px;
  --text-h3:       24px;
  --text-h4:       20px;
  --text-lead:     18px;
  --text-body:     16px;
  --text-sm:       14px;
  --text-xs:       12px;
  --text-display-fluid: clamp(48px, 9vw, 128px);
  --text-h1-fluid:      clamp(36px, 5vw, 64px);

  /* Line height */
  --leading-tight:  1;
  --leading-snug:   1.15;
  --leading-body:   1.5;

  /* Letter spacing */
  --tracking-display:  -0.02em;
  --tracking-tight:    -0.01em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;

  /* ── Spacing ────────────────────────────────────────────────── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-30:  120px;

  --section-pad-y: clamp(64px, 9vw, 120px);
  --page-gutter:   clamp(24px, 5vw, 64px);
  --content-max:   1600px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --radius-pill: 100px;
  --radius-card: 10px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --border-width: 1px;

  /* ── Shadow ─────────────────────────────────────────────────── */
  --shadow-card: 0 0 10px 0 rgba(0,0,0,0.25);
  --shadow-soft: 0 8px 30px -12px rgba(21,17,13,0.25);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   400ms;
}