/**
 * CSS Custom Properties (Design Tokens)
 * Refined dark space theme with jewel-like accents
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* Core Palette */
  --bg: #05050A;
  --bg-rgb: 5, 5, 10;
  --surface: #0C0C14;
  --surface-glass: rgba(255, 255, 255, 0.02);
  --purple: #682AE9;
  --purple-glow: rgba(104, 42, 233, 0.3);
  --purple-subtle: rgba(104, 42, 233, 0.12);
  --light: #FFFFFF;
  --light-purple: #A8C0FF;
  --text-primary: #FFFFFF;
  --text-secondary: #9494A8;
  --text-muted: #555566;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(104, 42, 233, 0.5);

  /* Legacy aliases (keep for existing CSS) */
  --header-link: #FFFFFF;
  --header-link-hover: #682AE9;
  --header-link-hover-icon: #FFFFFF;
  --header-link-active: rgba(85, 85, 85, 1);
  --std-color: #FFFFFF;
  --primary-color: #682AE9;
  --secondary-black: #0d081a;
  --secondary-gray: #9494A8;
  --body-bg: #efebfa;
  --gray: #9494A8;
  --comment: #555566;

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Inter', sans-serif;
  --font-family: 'JetBrains Mono', monospace;

  /* Font Sizes */
  --font-size-base: 100%;
  --font-size-h1: 4rem;
  --font-size-h3: 1.8rem;
  --font-size-h4: 1.4rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;
  --spacing-3xl: 8rem;

  /* Transitions */
  --transition-fast: 0.3s ease;
  --transition-medium: 0.5s ease;
  --transition-slow: 0.7s cubic-bezier(0.16, 1, 0.3, 1);

  /* Border Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* Z-index */
  --z-background: -1;
  --z-content: 1;
  --z-header: 10;
  --z-modal: 100;
}