/**
 * RankForge Design-System tokens — shared across index.html and login.html.
 * All colour, spacing, radius, and shadow values must be defined here.
 * Component files must reference these via var(--token-name); inline values
 * or raw hex literals in component code are CLAUDE.md violations.
 *
 * Source of truth: docs/design-system.md
 */

:root {
  /* --- Brand palette --- */
  --c-primary:   #00D4FF;
  --c-primary-70: #55E2FF;
  --c-secondary: #A066FF;
  --c-tertiary:  #FFB000;

  /* --- Neutral scale --- */
  --n-0:   #0A0A0F;
  --n-10:  #111118;
  --n-20:  #16161F;
  --n-30:  #1C1C28;
  --n-40:  #26263A;
  --n-50:  #3A3A52;
  --n-70:  #8A8AA0;
  --n-90:  #C9C9D8;
  --n-95:  #E8E8F0;

  /* --- Semantic colours --- */
  --success: #40D399;
  --danger:  #FF6B7A;
  --warning: #FFB000;

  /* --- Borders --- */
  --border-hairline:        rgba(255, 255, 255, 0.06);
  --border-hairline-strong: rgba(255, 255, 255, 0.10);

  /* --- Radii --- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  /* --- Shadows --- */
  --shadow-card: 0 32px 56px -20px rgba(0, 0, 0, 0.8);
  --shadow-sm:   0 4px  12px -4px  rgba(0, 0, 0, 0.4);

  /* --- Spacing scale (4px base) --- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* --- Typography --- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
}