/* ============================================================
   Warrior Fit Transformation: Design Tokens
   Single source of truth for colors, type and spacing.
   Base: Nocturne design system. Accent: "Forge" overrides.
   ============================================================ */

/* Fallback metrically matched to Inter, so the swap from the fallback to the
   web font (display=swap) doesn't shift layout. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  ascent-override: 90.2%;
  descent-override: 22.48%;
  line-gap-override: 0%;
  size-adjust: 107.4%;
}

:root {
  /* ---- Surfaces ---- */
  --color-bg:      #161826;   /* page background */
  --color-surface: #232532;   /* inputs, call-bar button */
  --color-section: oklch(0.30 0.12 25);   /* full-bleed pain band */

  /* ---- Text ---- */
  --color-text:    #e9e9ed;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  /* ---- Neutrals ---- */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-800: #3f424d;

  /* ---- Accent: Forge red-hot ---- */
  --color-accent:     oklch(0.68 0.22 28);   /* ≈ #f0442f */
  --color-accent-100: oklch(0.94 0.04 35);
  --color-accent-200: oklch(0.86 0.09 35);
  --color-accent-300: oklch(0.80 0.13 35);
  --color-accent-400: oklch(0.74 0.18 30);
  --color-accent-800: oklch(0.32 0.10 25);
  --color-accent-900: oklch(0.23 0.06 25);
  --glow-accent: 0 0 36px oklch(0.68 0.22 28 / 0.4);

  /* ---- Type ---- */
  --font-heading: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-heading-weight: 500;   /* never bolder */
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;

  /* ---- Spacing / layout ---- */
  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --site-max: 1200px;   /* whole site, incl. full-bleed bands; centered beyond this */
  --page-max: var(--site-max);   /* content rows (gutters sit inside) */
  --page-gutter: 24px;
  --section-pad: 96px;
  --header-offset: 80px;   /* fixed header height + breathing room, for scroll-margin-top */

  /* ---- Shape / elevation ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
}