/* ==========================================================================
   CodeFier — Design Tokens
   Extracted from the live production theme. Single source of truth.
   ========================================================================== */

:root {
  /* ---- Surfaces (warm near-black) ---- */
  --bg:               #0a0707;
  --bg-soft:          #100b0c;
  --surface:          #14100f;
  --surface-elevated: #1a1413;
  --border:           #2a2120;
  --border-soft:      rgba(245, 239, 230, 0.08);
  --border-hairline:  rgba(245, 239, 230, 0.14);

  /* ---- Accent (crimson) ---- */
  --primary:          #d6334a;
  --primary-dark:     #a8243a;
  --primary-soft:     #e8606f;
  --primary-glow:     rgba(214, 51, 74, 0.18);

  /* ---- Type colours (warm cream ramp) ---- */
  --text:             #f5efe6;
  --text-soft:        #d8cfc2;
  --text-muted:       #8a8175;
  --text-subtle:      #5a5249;

  /* ---- Families ---- */
  --font-display: "Fraunces", "Times New Roman", ui-serif, Georgia, serif;
  --font-sans:    "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Scale ---- */
  --fs-xs:      0.6875rem;
  --fs-sm:      0.8125rem;
  --fs-base:    0.9375rem;
  --fs-lg:      1.125rem;
  --fs-xl:      1.25rem;
  --fs-2xl:     1.5rem;
  --fs-3xl:     1.875rem;
  --fs-4xl:     2.25rem;
  --fs-5xl:     3rem;
  --fs-display: clamp(3rem, 9.5vw, 9rem);
  --fs-h1:      clamp(2.5rem, 6vw, 5.25rem);
  --fs-h2:      clamp(2rem, 4.4vw, 3.75rem);
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.25rem);

  /* ---- Spacing ---- */
  --sp-20: 0.44rem;
  --sp-30: 0.67rem;
  --sp-40: 1rem;
  --sp-50: 1.5rem;
  --sp-60: 2.25rem;
  --sp-70: 3.38rem;
  --sp-80: 5.06rem;
  --sp-90: 7.5rem;
  --sp-100: 10rem;

  /* ---- Layout ---- */
  --content: 1280px;
  --wide:    1440px;
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --block-gap: 24px;

  /* ---- Motion ---- */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur:       0.6s;
  --dur-fast:  0.28s;

  /* ---- Radii & shadow ---- */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);

  /* ---- Hero wash ---- */
  --hero-wash: radial-gradient(ellipse at top, rgba(214, 51, 74, 0.18), transparent 55%), #0a0707;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0.001s; --dur-fast: 0.001s; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}