/* ---------------------------------------------------------------------------
 * HYPER C design tokens
 *
 * Mirrored verbatim from the "HYPER C Design System" project
 * (tokens/colors.css, fonts.css, typography.css, spacing.css, effects.css,
 * base.css — concatenated here so the page costs one request instead of an
 * @import chain).
 *
 * Values are copied, never invented. When the design system changes, replace
 * the blocks below wholesale rather than hand-patching them — scripts/integrity-check.mjs
 * checks that every var() used across the site resolves to a token defined here.
 * ------------------------------------------------------------------------- */

/* --- fonts ---------------------------------------------------------------
 * Space Grotesk (display) / Manrope (body) / JetBrains Mono (technical accent).
 * Self-hosted variable webfonts via jsDelivr's Fontsource CDN, exactly as the
 * design system specifies. These are Google Fonts standing in for real brand
 * fonts, which do not exist yet — flagged in the design system readme.
 * ---------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/space-grotesk:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/manrope:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/jetbrains-mono:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
}

:root {
  /* --- color: raw ramps ------------------------------------------------ */
  --blue-50: #EAF3FF;
  --blue-100: #CFE4FF;
  --blue-200: #9FC9FF;
  --blue-300: #6BAAFF;
  --blue-400: #3B8CFF;
  --blue-500: #007BFF;
  --blue-600: #0062CC;
  --blue-700: #004A99;
  --blue-800: #003366;
  --blue-900: #001B36;

  --gray-0: #05070A;
  --gray-50: #0A0D12;
  --gray-100: #12161D;
  --gray-150: #171C24;
  --gray-200: #1A1F28;
  --gray-250: #1F2530;
  --gray-300: #262C36;
  --gray-400: #333B47;
  --gray-500: #454C57;
  --gray-600: #626C7A;
  --gray-700: #8992A0;
  --gray-800: #B7BFC9;
  --gray-900: #DDE2E8;
  --gray-950: #F4F6F8;

  --green-500: #2ECC81;
  --green-600: #20A868;
  --amber-500: #F5A623;
  --amber-600: #C97F0E;
  --red-500: #FF5470;
  --red-600: #E23A56;

  /* --- color: semantic -------------------------------------------------
   * Dark-mode first. Depth comes from surface lightness, not drop shadows.
   * -------------------------------------------------------------------- */
  --bg-canvas: var(--gray-50);
  --bg-surface: var(--gray-100);
  --bg-surface-2: var(--gray-200);
  --bg-elevated: var(--gray-250);
  --bg-overlay: rgba(5, 7, 10, 0.72);

  --border-subtle: var(--gray-300);
  --border-default: var(--gray-400);
  --border-strong: var(--gray-500);

  --text-primary: var(--gray-950);
  --text-secondary: var(--gray-700);
  --text-tertiary: var(--gray-600);
  --text-disabled: var(--gray-500);
  --text-on-brand: #FFFFFF;

  --brand: var(--blue-500);
  --brand-hover: var(--blue-400);
  --brand-active: var(--blue-600);
  --brand-subtle: rgba(0, 123, 255, 0.12);
  --brand-border: rgba(0, 123, 255, 0.4);

  --success: var(--green-500);
  --success-subtle: rgba(46, 204, 129, 0.12);
  --warning: var(--amber-500);
  --warning-subtle: rgba(245, 166, 35, 0.12);
  --danger: var(--red-500);
  --danger-subtle: rgba(255, 84, 112, 0.12);

  /* Container pairs, from the design system's color roles. Distinct from the
   * 0.12 washes above: a wash tints whatever it sits on, a container is a
   * surface in its own right — a deep tinted dark carrying a bright on-color.
   * Status pills are filled with these. */
  --brand-container: #0E2A47;
  --on-brand-container: var(--blue-200);
  --warning-container: #33270F;
  --neutral-container: var(--gray-250);
  --on-neutral-container: var(--gray-900);

  /* The one gradient the system allows: a radial brand wash behind a hero,
   * the showcase phone and the closing panel. */
  --glow-brand: rgba(0, 123, 255, 0.25);

  --focus-ring: 0 0 0 3px rgba(0, 123, 255, 0.35);

  /* --- typography ------------------------------------------------------ */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 56px;
  --text-5xl: 72px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-mono: 0.02em;

  /* --- spacing & radius -------------------------------------------------
   * 4px base unit. Cards standardize on 24px padding with 12px internal gaps.
   * -------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --container-max: 1200px;

  /* --- effects & motion -------------------------------------------------
   * Shadows are reserved for genuinely elevated layers; resting cards use
   * border + surface tone instead. Motion is fast and functional — nothing
   * loops, nothing is ambient.
   * -------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --shadow-glow-brand: 0 0 0 1px rgba(0, 123, 255, 0.4), 0 0 24px rgba(0, 123, 255, 0.25);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  --blur-glass: 12px;
}

/* --- base ---------------------------------------------------------------- */
* {
  box-sizing: border-box;
}

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

code,
pre,
.mono {
  font-family: var(--font-mono);
}

a {
  color: var(--brand);
}

a:hover {
  color: var(--brand-hover);
}

::selection {
  background: var(--brand-subtle);
  color: var(--text-primary);
}