/*
  VaultMaster — Design Tokens
  Source: WEBSITE_DESIGN_DOCUMENT.md, Section 2 (Visual Identity) & Section 14 (Design System)
  Font substitution note: "General Sans" (display face) is not available on Google Fonts;
  Space Grotesk is used in its place — same humanist-geometric character, zero external
  dependency risk. See README.md for the full substitution rationale.
*/

:root {
  /* ---- Color: core palette (from the shipped application) ---- */
  --bg-void: #0A0C0F;
  --bg-deep: #10141A;
  --bg-raised: #161B24;
  --surface: #1A2030;
  --surface-2: #212840;
  --border: #2A3348;
  --border-glow: rgba(0, 212, 255, 0.20);

  --primary: #00D4FF;
  --primary-rgb: 0, 212, 255;
  --accent: #00FF88;
  --accent-rgb: 0, 255, 136;
  --warn-orange: #FFAA00;
  --warn-orange-rgb: 255, 170, 0;
  --danger: #FF3366;
  --danger-rgb: 255, 51, 102;

  --text-primary: #E2E8F0;
  --text-secondary: #8899AA;
  --text-tertiary: #556677;

  /* ---- Color: marketing-only gradient family ---- */
  --gradient-violet: #6E56CF;
  --gradient-violet-rgb: 110, 86, 207;
  --gradient-stop-1: #00D4FF;
  --gradient-stop-2: #6E56CF;

  /* ---- Typography ---- */
  --font-display: 'Space Grotesk', 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Type scale — desktop baseline */
  --text-hero: 72px;
  --text-h2: 44px;
  --text-h3: 28px;
  --text-h4: 20px;
  --text-body-lg: 19px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-button: 15px;
  --text-nav: 14px;
  --text-eyebrow: 12px;
  --text-mono: 13px;

  /* Type scale — mobile (top of scale compresses only) */
  --text-hero-mobile: 40px;
  --text-h2-mobile: 30px;

  --weight-body: 400;
  --weight-medium: 500;
  --weight-headline: 600;

  /* ---- Spacing (8px base unit) ---- */
  --space-half: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;
  --space-12: 96px;
  --space-16: 128px;
  --space-20: 160px;

  /* ---- Radius scale ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- Elevation / glow ---- */
  --glow-hover: 0 0 40px rgba(var(--primary-rgb), 0.08);
  --glow-overlay: 0 0 60px rgba(var(--primary-rgb), 0.14);
  --glow-button: 0 4px 20px rgba(var(--primary-rgb), 0.25);
  --shadow-device: 0 40px 80px rgba(0, 0, 0, 0.5);

  /* ---- Motion ---- */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-interaction: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-reveal: 600ms;
  --duration-interaction: 200ms;

  /* ---- Layout ---- */
  --content-max: 1120px;
  --content-max-wide: 1200px;
  --nav-height: 72px;
}