/* ==========================================================================
   KINKFACTOR — design tokens (v2, editorial)
   Carbon black, oxblood & wine, warm bone type. Red is a sensual accent,
   never a wallpaper and never an error colour.
   ========================================================================== */

@font-face { font-family: "Clash Display"; src: url("/ui/fonts/clash-display-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/ui/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/ui/fonts/clash-display-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/ui/fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/ui/fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/ui/fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/ui/fonts/switzer-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/ui/fonts/newsreader-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/ui/fonts/newsreader-var-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

:root {
  color-scheme: dark;

  /* Carbon */
  --ink: #080707;
  --ink-1: #0e0c0c;
  --ink-2: #151212;
  --ink-3: #1e1918;
  --ink-4: #2b2423;

  /* Blood */
  --oxblood: #2e080c;
  --burgundy: #52101a;
  --wine: #74141f;
  --crimson: #9e1a29;
  --flare: #d92f28;        /* the one bright red — white text on it = 4.7:1 */
  --flare-hi: #ef4238;
  --flare-text: #ff7465;   /* red for small text on carbon (AA) */

  /* Bone */
  --bone: #efe6dc;
  --bone-2: #c9beb3;
  --bone-3: #978b82;       /* muted text — 5.6:1 on --ink */
  --bone-4: #6b615b;       /* decorative only */
  --paper: #e9dfd3;        /* light surface for inverted modules */

  /* Lines */
  --line: rgba(239, 230, 220, 0.1);
  --line-2: rgba(239, 230, 220, 0.18);
  --line-3: rgba(239, 230, 220, 0.34);

  /* States (always paired with icon/text) */
  --ok: #5cc38f;
  --warn: #e8ad4b;
  --info: #93b3e2;

  /* Legacy aliases used by existing page styles */
  --bg: var(--ink); --bg-2: var(--ink-1); --surface: var(--ink-2); --surface-2: var(--ink-3); --surface-3: var(--ink-4); --surface-4: #3a3130;
  --text: var(--bone); --text-2: var(--bone-2); --text-3: var(--bone-3); --text-inverse: #120d0c;
  --red: var(--flare); --red-hi: var(--flare-hi); --red-2: var(--crimson); --red-text: var(--flare-text);
  --red-soft: rgba(217, 47, 40, 0.14); --red-line: rgba(217, 47, 40, 0.45);
  --brass: #c9a26a; --brass-soft: rgba(201, 162, 106, 0.14);
  --ok-soft: rgba(92, 195, 143, 0.13); --warn-soft: rgba(232, 173, 75, 0.13); --info-soft: rgba(147, 179, 226, 0.13);
  --hover: rgba(239, 230, 220, 0.05); --press: rgba(239, 230, 220, 0.09);
  --focus: #ffb3a6;
  --focus-ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--focus);

  /* Type */
  --f-display: "Clash Display", "Switzer", ui-sans-serif, system-ui, sans-serif;
  --f-ui: "Switzer", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-read: "Newsreader", ui-serif, Georgia, serif;
  --font-sans: var(--f-ui); --font-serif: var(--f-read); --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --t-mega: clamp(3.6rem, 1rem + 11.5vw, 13rem);   /* posters */
  --t-xxl: clamp(3rem, 1.2rem + 7vw, 8.5rem);
  --t-xl: clamp(2.4rem, 1.2rem + 4.6vw, 5.6rem);
  --t-l: clamp(1.9rem, 1.1rem + 2.8vw, 3.6rem);
  --t-m: clamp(1.45rem, 1.1rem + 1.3vw, 2.2rem);
  --t-s: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
  --t-body: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --t-small: 0.875rem;
  --t-micro: 0.72rem;

  /* legacy step aliases */
  --step--2: var(--t-micro); --step--1: var(--t-small); --step-0: var(--t-body); --step-1: var(--t-s);
  --step-2: var(--t-m); --step-3: var(--t-l); --step-4: var(--t-xl); --step-5: var(--t-xxl); --step-6: var(--t-mega);

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.25rem; --s-6: 1.5rem;
  --s-7: 2rem; --s-8: 2.5rem; --s-9: 3rem; --s-10: 4rem; --s-11: 5rem; --s-12: 7rem;
  --margin: clamp(1.25rem, 0.4rem + 3.6vw, 4.5rem);  /* page side margin */
  --gutter: var(--margin);
  --col-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);
  --section: clamp(4.5rem, 2rem + 8vw, 10rem);

  --w-max: 1680px;
  --w-read: 700px;
  --w-text: 760px;
  --w-wide: 1180px;
  --head-h: 76px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --nav-h: var(--head-h);
  --tabbar-h: 0px;

  /* Shape — rounded where it means something */
  --r-xs: 4px; --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  --shadow-1: none;
  --shadow-2: 0 20px 50px -30px rgba(0, 0, 0, 0.9);
  --shadow-3: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --glow-red: none;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
  --t-fast: 140ms; --t: 240ms; --t-slow: 520ms;

  --z-sticky: 50; --z-nav: 100; --z-sheet: 200; --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t: 0ms; --t-slow: 0ms; }
}