/**
 * 42ostriches — Design tokens
 * Single source of truth for colour, type, spacing, radius, shadow, motion.
 * Every component file reads from these variables — never hard-code values.
 */

:root {
  /* ---- Colour: brand red + black, neutrals derived from black ---- */
  --color-red-700: #6b0000;
  --color-red-600: #8b0000; /* brand primary */
  --color-red-500: #a3201f; /* hover/active on dark */
  --color-red-100: #f7e6e5; /* tint for subtle fills/badges */

  --color-ink-900: #0d0d0d; /* primary text / near-black */
  --color-ink-700: #313131; /* secondary text */
  --color-ink-500: #656565; /* muted text */
  --color-ink-300: #a3a19e; /* placeholders, disabled */
  --color-ink-150: #d8d6d2; /* borders */
  --color-ink-100: #ececea; /* hairlines */

  --color-paper-000: #ffffff;
  --color-paper-050: #f8f7f5; /* alternate section background */

  --color-focus: #1a6bff; /* visible keyboard focus, distinct from brand red */

  /* ---- Typography ---- */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --fs-900: clamp(2.75rem, 2rem + 3.2vw, 5.25rem);   /* hero H1 */
  --fs-800: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);     /* section H2 */
  --fs-700: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);    /* H3 */
  --fs-600: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);  /* H4 / lead */
  --fs-500: 1.125rem;  /* large body */
  --fs-400: 1rem;      /* body */
  --fs-300: 0.9375rem; /* small */
  --fs-200: 0.8125rem; /* micro / eyebrow */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  --tracking-eyebrow: 0.12em;
  --tracking-display: 0.01em;

  /* ---- Spacing (4px base unit) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* ---- Layout ---- */
  --container-max: 1220px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --section-pad-y: clamp(3.5rem, 6vw, 7rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.07);
  --shadow-md: 0 12px 28px rgba(13, 13, 13, 0.10);
  --shadow-lg: 0 24px 56px rgba(13, 13, 13, 0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;
}