/* ===== AuthKit Design System Tokens ===== */

:root {
  /* --- Colors --- */
  --color-midnight-canvas: #05060f;
  --color-steel-plate: #2f343e;
  --color-fog-veil: #9da7ba;
  --color-moon-mist: #c7d3ea;
  --color-frost-glow: #d1e4fa;
  --color-ice-highlight: #d8ecf8;
  --gradient-ice-highlight: linear-gradient(0deg, #d8ecf8 0%, #98c0ef 100%);
  --color-pure-white: #ffffff;
  --color-void-violet: #663af3;
  --color-blueprint-blue: #b6d9fc;
  --color-gridline-blue: #3f4959;
  --color-glass-edge: rgba(186,215,247,0.12);
  --color-luminous-fill: rgba(199,211,234,0.12);

  /* --- Typography --- */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --text-caption: 12px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 24px;
  --text-heading: 28px;
  --text-heading-lg: 44px;
  --text-display: 48px;

  /* --- Spacing --- */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-120: 120px;

  --page-max-width: 1200px;
  --section-gap: 120px;
  --card-padding: 24px;

  /* --- Radii --- */
  --radius-cards: 16px;
  --radius-badges: 6px;
  --radius-inputs: 6px;
  --radius-buttons: 999px;
  --radius-icons: 9999px;

  /* --- Shadows / Elevation --- */
  --shadow-card: inset 0 1px 1px rgba(199,211,234,0.12),
                 inset 0 24px 48px rgba(199,211,234,0.05),
                 0 24px 32px rgba(6,6,14,0.7);
  --shadow-modal: inset 0 1px 1px rgba(216,236,248,0.2),
                  inset 0 24px 48px rgba(168,216,245,0.06),
                  0 16px 32px rgba(0,0,0,0.3);
  --shadow-btn-ghost: inset 0 0 0 1px var(--color-glass-edge);
  --shadow-btn-ghost-hover: inset 0 0 0 1px rgba(186,215,247,0.2);
}