/* ==============================================================
   26 BRANDING AGENCY — DESIGN TOKENS (Option B — "Cinematic SaaS")
   Architecture: primitive → semantic → component
   Motion philosophy: restrained + deliberate + cinematic (not loud).
   Keep this file the single source of truth — no hard-coded colors
   or spacing elsewhere, always reference a token.
   ============================================================== */

:root {
  /* PRIMITIVES ───────────────────────── */
  --c-ink-1000:#040612; --c-ink-900:#0b0f1e; --c-ink-800:#111728;
  --c-ink-700:#1a2135; --c-ink-600:#2a3045; --c-ink-500:#4b5368;
  --c-ink-400:#6b7489; --c-ink-300:#9aa2b5; --c-ink-200:#c9cdd9;
  --c-ink-100:#e6e8ef; --c-ink-50:#f5f6fa;  --c-ink-25:#fafbfd;
  --c-white:#fff;

  --c-red-900:#7a0e0e; --c-red-800:#a61212; --c-red-700:#c11616;
  --c-red-600:#dc1f1f; --c-red-500:#ef2929; --c-red-400:#ff4545; --c-red-300:#ff7070;

  /* Spacing — 4px base */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px;
  --s-12:96px; --s-13:128px; --s-14:160px;

  /* Radii */
  --r-1:4px; --r-2:6px; --r-3:8px; --r-4:12px; --r-5:16px; --r-6:24px; --r-full:9999px;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(5,8,19,.06);
  --shadow-md:0 4px 12px rgba(5,8,19,.08);
  --shadow-lg:0 12px 40px rgba(5,8,19,.12);
  --shadow-xl:0 24px 64px rgba(5,8,19,.18);
  --shadow-glow:0 0 0 1px rgba(239,41,41,.2), 0 8px 24px rgba(239,41,41,.18);
  --shadow-glow-strong:0 0 0 1px rgba(239,41,41,.35), 0 16px 48px rgba(239,41,41,.28);

  /* Type scale */
  --t-xs:12px;  --t-sm:13px;  --t-base:15px; --t-md:17px; --t-lg:20px;
  --t-xl:24px;  --t-2xl:32px; --t-3xl:40px;  --t-4xl:56px; --t-5xl:72px; --t-6xl:96px;

  /* Motion */
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);
  --ease-spring:cubic-bezier(0.22,1,0.36,1);
  --d-fast:180ms; --d-base:320ms; --d-slow:600ms; --d-cine:1200ms;

  /* SEMANTIC ───────────────────────── */
  --bg-page:var(--c-ink-25);
  --bg-surface:var(--c-white);
  --bg-inverse:var(--c-ink-900);
  --bg-accent:var(--c-red-600);

  --text-primary:var(--c-ink-900);
  --text-secondary:var(--c-ink-500);
  --text-muted:var(--c-ink-400);
  --text-accent:var(--c-red-600);
  --text-inverse:var(--c-white);

  --border-subtle:var(--c-ink-100);
  --border-default:var(--c-ink-200);
  --border-strong:var(--c-ink-700);

  --font-sans:'Inter', system-ui, sans-serif;
  --font-serif:'Instrument Serif', Georgia, serif;
  --font-mono:'JetBrains Mono', monospace;
}

/* Base reset + typography */
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font-sans);
  font-size:var(--t-base);
  line-height:1.55;
  color:var(--text-primary);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; transition:color var(--d-fast) var(--ease-out); }
img { display:block; max-width:100%; height:auto; }

.font-display { font-family:var(--font-sans); font-weight:800; letter-spacing:-0.025em; }
.font-serif-italic { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-0.015em; }
.font-mono, .mono { font-family:var(--font-mono); font-feature-settings:"tnum" 1, "calt" 0; }

::selection { background:var(--c-red-600); color:var(--c-white); }

/* Reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}