/*
 * IVW-003 design tokens.
 *
 * Single source of truth for colour, type, spacing, motion, and glow
 * across every variant. See shared/styles/TOKENS.md for rationale, the
 * contrast table, and usage rules. Out of scope here: components
 * (IVW-011) and variant-specific overrides (each variant README).
 *
 * Fonts are self-hosted from shared/assets/fonts/*.woff2 so the
 * production CSP (`font-src 'self'`, D-005 D2) is satisfied with no
 * external font origin.
 */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../assets/fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------------------------------------------------------------
   * Colour. Six hues at most: neutral grey (achromatic), brand orange
   * (~33deg), proof blue (~213deg, the complement of brand), and threat
   * red-orange (~8deg, analogous to brand). See TOKENS.md section 1 for
   * the colour-wheel reasoning and the full contrast table.
   * ------------------------------------------------------------- */

  /* Brand orange and its tint/shade. */
  --brand: #FF8B00;
  --brand-rgb: 255, 139, 0;
  --brand-hot: #FFA733;
  --brand-hot-rgb: 255, 167, 51;
  --brand-ember: #B85C00;
  --brand-ember-rgb: 184, 92, 0;

  /* Complementary blue, reserved for "proven" or "verified" states. */
  --proof: #0074FF;
  --proof-rgb: 0, 116, 255;

  /* Analogous red-orange, reserved for fear or failure moments. */
  --threat: #FF3B1F;
  --threat-rgb: 255, 59, 31;

  /* Neutral scale, darkest to lightest. */
  --bg-0: #0A0A0A;
  --bg-0-rgb: 10, 10, 10;
  --bg-1: #121212;
  --bg-1-rgb: 18, 18, 18;
  --bg-2: #1A1A1A;
  --bg-2-rgb: 26, 26, 26;
  --bg-3: #242424;
  --bg-3-rgb: 36, 36, 36;
  --fg: #E6E6E6;
  --fg-rgb: 230, 230, 230;
  --muted: #8A97A8;
  --muted-rgb: 138, 151, 168;

  /* ---------------------------------------------------------------
   * Typography. One family for everything (IBM Plex Sans); IBM Plex
   * Mono is used only for code, diagnostics, and uppercase labels
   * (GOALS.org Rules of Design: one ideal font, used consistently).
   * ------------------------------------------------------------- */

  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, monospace;

  /* Fluid type scale, clamp() from 14px (--text-xs floor) to 96px
   * (--text-4xl ceiling), fitted between a 400px and 1440px viewport.
   * Each step carries its own line-height and letter-spacing. */
  --text-xs: clamp(0.875rem, 0.851rem + 0.0962vw, 0.9375rem);
  --leading-xs: 1.5;
  --tracking-xs: 0.01em;

  --text-sm: clamp(0.9375rem, 0.8894rem + 0.1923vw, 1.0625rem);
  --leading-sm: 1.5;
  --tracking-sm: 0em;

  --text-md: clamp(1rem, 0.9279rem + 0.2885vw, 1.1875rem);
  --leading-md: 1.6;
  --tracking-md: 0em;

  --text-lg: clamp(1.1875rem, 1.0673rem + 0.4808vw, 1.5rem);
  --leading-lg: 1.4;
  --tracking-lg: -0.005em;

  --text-xl: clamp(1.4375rem, 1.2212rem + 0.8654vw, 2rem);
  --leading-xl: 1.3;
  --tracking-xl: -0.01em;

  --text-2xl: clamp(1.8125rem, 1.4519rem + 1.4423vw, 2.75rem);
  --leading-2xl: 1.2;
  --tracking-2xl: -0.015em;

  --text-3xl: clamp(2.375rem, 1.75rem + 2.5vw, 4rem);
  --leading-3xl: 1.1;
  --tracking-3xl: -0.02em;

  --text-4xl: clamp(3.5rem, 2.5385rem + 3.8462vw, 6rem);
  --leading-4xl: 1.02;
  --tracking-4xl: -0.025em;

  /* Uppercase tracked label style: small mono, wide tracking. */
  --label-font: var(--font-mono);
  --label-size: var(--text-xs);
  --label-weight: 500;
  --label-tracking: 0.12em;
  --label-transform: uppercase;

  /* ---------------------------------------------------------------
   * Spacing, 4px base. Also used for gap and margin, not only padding.
   * ------------------------------------------------------------- */

  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px, the phone gutter */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */

  --gutter-phone: var(--space-4); /* 16px */

  --container-sm: 40rem;    /* 640px */
  --container-md: 48rem;    /* 768px */
  --container-lg: 64rem;    /* 1024px */
  --container-xl: 80rem;    /* 1280px */
  --container-2xl: 90rem;   /* 1440px */

  /* ---------------------------------------------------------------
   * Motion. Durations, easing, and one named settle keyframes block
   * with two decreasing overshoots (ui-design skill: multiple
   * keyframes with controlled overshoot that decreases before the
   * movement stops).
   * ------------------------------------------------------------- */

  --duration-fast: 120ms;
  --duration-base: 240ms;
  --duration-slow: 480ms;
  --duration-slower: 800ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-settle: linear; /* the settle keyframes carry their own curve */

  /* ---------------------------------------------------------------
   * Glow. Fades to full transparency at the spread edge (ui-design
   * skill: fade within 10 to 20px of the element edge). Any container
   * holding a glowing element must set `overflow: visible` or pad by
   * at least --glow-spread on every side so the glow is never cut off.
   * ------------------------------------------------------------- */

  --glow-spread: 16px;
  --glow-color-rgb: var(--brand-rgb);
  --glow: 0 0 calc(var(--glow-spread) * 0.25) rgba(var(--glow-color-rgb), 0.55),
    0 0 calc(var(--glow-spread) * 0.6) rgba(var(--glow-color-rgb), 0.32),
    0 0 var(--glow-spread) rgba(var(--glow-color-rgb), 0);
  --glow-static: 0 2px 12px rgba(var(--bg-0-rgb), 0.6),
    0 0 var(--glow-spread) rgba(var(--glow-color-rgb), 0.22);
}

/* Named settle animation: two decreasing overshoots before rest.
 * Overshoot 1 at 45% (6px past rest, opposite of the entry direction);
 * overshoot 2 at 72% (2px, smaller than overshoot 1); rest at 100%. */
@keyframes iv-settle {
  0% {
    transform: translateY(16px) scale(0.96);
    opacity: 0;
  }
  45% {
    transform: translateY(-6px) scale(1.015);
    opacity: 1;
  }
  72% {
    transform: translateY(2px) scale(0.997);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

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

  /* Disable the settle keyframes: elements land at their end state
   * immediately instead of animating through the overshoots. */
  @keyframes iv-settle {
    0%,
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
}