/* CapForge design tokens — CSS custom properties */
/* Source of truth for brand + UI. Import this file into any CapForge design. */

:root {
  /* ── Surfaces ─────────────────────────────────────────────────── */
  --cf-paper:     #F6F4EF;   /* warm off-white, main background */
  --cf-paper-alt: #EFEAE0;   /* slightly deeper paper */
  --cf-paper-hi:  #FAFAF7;   /* panel / title bar */
  --cf-ink:       #0F0F0E;   /* near-black with warmth */
  --cf-ink-soft:  #2A2925;
  --cf-ink-mute:  #6B6458;

  /* ── Brand ────────────────────────────────────────────────────── */
  --cf-orange:    #D4952A;   /* signature caption BG */
  --cf-orange-hi: #E8A93B;   /* hover / highlight variant */
  --cf-yellow:    #F5C842;   /* active word highlight */
  --cf-spark:     #E53935;   /* anvil spark red */
  --cf-blue:      #1B6FE0;   /* slider fill — used sparingly */

  /* Derived accent rail */
  --cf-wash:      #FFF8EC;   /* active-section wash behind orange */

  /* ── Lines ────────────────────────────────────────────────────── */
  --cf-line:      rgba(15, 15, 14, 0.10);
  --cf-line-hard: rgba(15, 15, 14, 0.18);

  /* ── Shadow ramps ─────────────────────────────────────────────── */
  --cf-shadow-sm: 0 1px 2px rgba(15, 15, 14, 0.08);
  --cf-shadow-md: 0 6px 16px -8px rgba(15, 15, 14, 0.18);
  --cf-shadow-lg: 0 24px 80px -20px rgba(15, 15, 14, 0.30),
                  0 6px 16px -8px rgba(15, 15, 14, 0.18);
  --cf-shadow-drop: 0 30px 60px -20px rgba(0, 0, 0, 0.5),
                    0 8px 20px -10px rgba(0, 0, 0, 0.35);

  /* ── Radii ────────────────────────────────────────────────────── */
  --cf-radius-xs: 3px;
  --cf-radius-sm: 6px;
  --cf-radius-md: 10px;
  --cf-radius-lg: 18px;
  --cf-radius-pill: 999px;

  /* ── Spacing (4px base) ──────────────────────────────────────── */
  --cf-space-1: 4px;
  --cf-space-2: 8px;
  --cf-space-3: 12px;
  --cf-space-4: 16px;
  --cf-space-5: 24px;
  --cf-space-6: 32px;
  --cf-space-7: 48px;
  --cf-space-8: 64px;

  /* ── Type ─────────────────────────────────────────────────────── */
  --cf-font-ui:       'Inter', system-ui, -apple-system, sans-serif;
  --cf-font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --cf-font-display:  'Instrument Serif', 'Cormorant Garamond', Georgia, serif;

  --cf-font-cap-bold:   'Anton', 'Bebas Neue', Impact, sans-serif;
  --cf-font-cap-script: 'Caveat', cursive;
  --cf-font-cap-chunk:  'Archivo Black', 'Inter', sans-serif;
  --cf-font-cap-mono:   'JetBrains Mono', monospace;

  /* Type scale */
  --cf-text-xs:   11px;
  --cf-text-sm:   12px;
  --cf-text-base: 14px;
  --cf-text-md:   16px;
  --cf-text-lg:   20px;
  --cf-text-xl:   28px;
  --cf-text-2xl:  42px;
  --cf-text-3xl:  64px;
  --cf-text-4xl:  96px;

  /* ── Motion ──────────────────────────────────────────────────── */
  --cf-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --cf-ease-in:      cubic-bezier(0.55, 0, 0.85, 0.15);
  --cf-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --cf-ease-back:    cubic-bezier(0.34, 1.56, 0.64, 1);

  --cf-dur-fast: 120ms;
  --cf-dur-med:  250ms;
  --cf-dur-slow: 600ms;
}