@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,900&display=swap');

:root {
  /* ==========================================================================
     Annularity - Design System Tokens (Minimalist & Modern Engineering)
     ========================================================================== */
  
  /* Backgrounds & Surfaces (Matte Obsidian & Pure Deep Neutrals) */
  --bg-primary: #050507;
  --bg-secondary: #0A0A0E;
  --bg-surface: #0F0F14;
  --bg-surface-subtle: #14141A;
  --bg-surface-hover: #181822;
  --bg-glass: rgba(10, 10, 14, 0.78);

  /* Brand Accents (Subtle, Restrained Precision) */
  --accent: #AB33EA;
  --accent-light: #B84DF8;
  --accent-bright: #D946EF;
  --accent-dark: #791EB8;
  --accent-subtle: rgba(171, 51, 234, 0.08);
  --accent-glow: rgba(171, 51, 234, 0.15);
  
  /* Text & Typography */
  --text-primary: #FFFFFF;
  --text-secondary: #E2E8F0;
  --text-muted: #8E9BAE;
  --text-dim: #556275;
  
  /* Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-light: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-accent: rgba(171, 51, 234, 0.35);
  
  /* Typography Stacks (Satoshi everywhere) */
  --font-sans: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Layout Dimensions */
  --max-width: 1180px;
  --max-width-wide: 1280px;
  --header-height: 70px;
  
  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease);
  --transition-base: 280ms var(--ease);
  --transition-slow: 500ms var(--ease);
}