/* ============================================================
   AURORA DESIGN SYSTEM — Foundation Tokens
   Premium layered design with warm grays, electric blue,
   cyan accents, mesh gradients, and refined depth.
   ============================================================ */

:root {
  /* ---- Primary: Electric Blue ---- */
  --color-primary: #0066ff;
  --color-primary-hover: #0052cc;
  --color-primary-pressed: #003d99;
  --color-primary-light: #3d8bff;
  --color-on-primary: #ffffff;

  /* ---- Accent: Cyan ---- */
  --color-accent: #00d4ff;
  --color-accent-hover: #00b8e6;
  --color-accent-dim: #00a3c4;

  /* ---- Deep Navy (hero, dark surfaces) ---- */
  --color-navy: #0a0e1a;
  --color-navy-deep: #050810;
  --color-navy-mid: #121829;
  --color-navy-soft: #1a2236;

  /* ---- Warm Grays (replaces flat black/white) ---- */
  --color-warm-white: #fafafb;
  --color-warm-gray-50: #f4f4f6;
  --color-warm-gray-100: #e8e8ec;
  --color-warm-gray-200: #d1d1d8;
  --color-warm-gray-300: #a8a8b3;
  --color-warm-gray-400: #7878_84;
  --color-warm-gray-500: #5a5a66;
  --color-warm-gray-600: #3d3d48;
  --color-warm-gray-700: #2a2a34;
  --color-warm-gray-800: #1c1c24;
  --color-warm-gray-900: #131318;

  /* ---- Accent Spectrum (for tags, dots, tints) ---- */
  --color-coral: #ff6b6b;
  --color-amber: #ffa94d;
  --color-lime: #51cf66;
  --color-violet: #845ef7;
  --color-pink: #f783ac;
  --color-teal: #20c997;

  /* ---- Semantic ---- */
  --color-success: #51cf66;
  --color-warning: #ffa94d;
  --color-error: #ff6b6b;
  --color-info: #0066ff;

  /* ============================================================
     GLASS MORPHISM
     ============================================================ */

  --glass-blur: 20px;
  --glass-saturation: 160%;

  /* ============================================================
     MESH GRADIENTS (for section backgrounds, depth)
     ============================================================ */

  --mesh-blue: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 102, 255, 0.08), transparent 60%);
  --mesh-cyan: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 212, 255, 0.06), transparent 60%);
  --mesh-violet: radial-gradient(ellipse 50% 40% at 50% 100%, rgba(132, 94, 247, 0.05), transparent 60%);
  --mesh-combined: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 102, 255, 0.08), transparent 60%),
                   radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 212, 255, 0.06), transparent 60%),
                   radial-gradient(ellipse 50% 40% at 50% 100%, rgba(132, 94, 247, 0.05), transparent 60%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Type Scale — tighter, more premium */
  --text-hero: clamp(36px, 7vw, 72px);
  --text-display: clamp(30px, 5vw, 52px);
  --text-h1: clamp(26px, 3.5vw, 44px);
  --text-h2: clamp(22px, 2.5vw, 34px);
  --text-h3: clamp(18px, 1.5vw, 26px);
  --text-h4: 20px;
  --text-h5: 17px;
  --text-subtitle: 17px;
  --text-body: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-micro: 11px;
  --text-micro-upper: 10px;

  /* Line Heights — tighter for headings */
  --leading-hero: 1.02;
  --leading-display: 1.08;
  --leading-heading: 1.12;
  --leading-subtitle: 1.45;
  --leading-body: 1.60;
  --leading-caption: 1.40;

  /* Letter Spacing — tighter */
  --tracking-hero: -2.5px;
  --tracking-display: -1.5px;
  --tracking-heading: -0.6px;
  --tracking-normal: 0;
  --tracking-micro-upper: 1.2px;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ============================================================
     SPACING — 4px base, tighter rhythm
     ============================================================ */

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 96px;
  --space-hero: 120px;

  /* ============================================================
     BORDER RADIUS — more rounded, premium feel
     ============================================================ */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-xxl: 28px;
  --radius-xxxl: 36px;
  --radius-full: 9999px;

  /* ============================================================
     ELEVATION — layered, colored shadows
     ============================================================ */

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 14, 26, 0.04), 0 1px 3px rgba(10, 14, 26, 0.03);
  --shadow-2: 0 2px 8px rgba(10, 14, 26, 0.06), 0 1px 3px rgba(10, 14, 26, 0.04);
  --shadow-3: 0 8px 24px rgba(10, 14, 26, 0.08), 0 2px 8px rgba(10, 14, 26, 0.05);
  --shadow-4: 0 16px 48px rgba(10, 14, 26, 0.12), 0 4px 16px rgba(10, 14, 26, 0.06);
  --shadow-5: 0 32px 64px rgba(10, 14, 26, 0.16), 0 8px 24px rgba(10, 14, 26, 0.08);

  /* Colored glow shadows */
  --shadow-glow-blue: 0 0 24px rgba(0, 102, 255, 0.15), 0 0 48px rgba(0, 102, 255, 0.08);
  --shadow-glow-cyan: 0 0 24px rgba(0, 212, 255, 0.15), 0 0 48px rgba(0, 212, 255, 0.08);

  /* Inner glow (for glass cards) */
  --shadow-inner-light: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  --shadow-inner-dark: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ============================================================
     Z-INDEX
     ============================================================ */

  --z-base: 0;
  --z-content: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* ============================================================
     OPACITY
     ============================================================ */

  --opacity-0: 0;
  --opacity-30: 0.3;
  --opacity-50: 0.5;
  --opacity-70: 0.7;
  --opacity-90: 0.9;
  --opacity-100: 1;

  /* ============================================================
     BLUR
     ============================================================ */

  --blur-sm: 4px;
  --blur-md: 12px;
  --blur-lg: 24px;
  --blur-xl: 40px;

  /* ============================================================
     CONTAINER
     ============================================================ */

  --container-max: 1200px;
  --container-gutter: 28px;
  --container-narrow: 720px;
  --container-wide: 1440px;

  /* ============================================================
     MOTION
     ============================================================ */

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --ease-spring: cubic-bezier(0.5, 1.5, 0.5, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-instant: 80ms;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 380ms;
  --duration-slower: 550ms;
  --duration-page: 800ms;

  /* ============================================================
     BREAKPOINTS (reference)
     ============================================================ */

  --bp-mobile-sm: 480px;
  --bp-mobile: 768px;
  --bp-tablet: 1024px;
  --bp-desktop: 1280px;
  --bp-wide: 1536px;

  /* ============================================================
     GRADIENT BORDERS (for premium cards)
     ============================================================ */

  --gradient-border-light: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.05));
  --gradient-border-blue: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(0, 212, 255, 0.15));
  --gradient-border-dark: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}