/* ============================================================
   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: #787884;
  --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: #3d8bff;
  --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 (rem for Dynamic Type support) */
  --text-hero: clamp(2.25rem, 7vw, 4.5rem);
  --text-display: clamp(1.875rem, 5vw, 3.25rem);
  --text-h1: clamp(1.625rem, 3.5vw, 2.75rem);
  --text-h2: clamp(1.375rem, 2.5vw, 2.125rem);
  --text-h3: clamp(1.125rem, 1.5vw, 1.625rem);
  --text-h4: 1.25rem;
  --text-h5: 1.0625rem;
  --text-subtitle: 1.0625rem;
  --font-size-body: 0.9375rem;
  --text-body-sm: 0.8125rem;
  --text-caption: 0.75rem;
  --text-micro: 0.6875rem;
  --text-micro-upper: 0.625rem;

  /* 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 (em for relative scaling) */
  --tracking-hero: -0.04em;
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-normal: 0;
  --tracking-micro-upper: 0.08em;

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

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

  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-xxl: 2rem;
  --space-xxxl: 2.5rem;
  --space-section-sm: 3rem;
  --space-section: 4rem;
  --space-section-lg: 6rem;
  --space-hero: 7.5rem;

  /* ============================================================
     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);
  --shadow-tactile-btn: 0 2px 0 rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --shadow-tactile-btn-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.2);

  /* Ambient Glows (from refactor design system) */
  --glow-primary: 0 0 20px rgba(0, 102, 255, 0.35);
  --glow-accent: 0 0 20px rgba(0, 212, 255, 0.35);
  --glow-teal: 0 0 20px rgba(32, 201, 151, 0.35);
  --glow-amber: 0 0 20px rgba(255, 169, 77, 0.35);
  --glow-violet: 0 0 20px rgba(132, 94, 247, 0.35);
  --glow-lime: 0 0 20px rgba(81, 207, 102, 0.35);

  /* ============================================================
     PILL & CHIP TOKENS
     ============================================================ */

  --pill-pad-xs: 2px 8px;
  --pill-pad-sm: 5px 12px;
  --pill-pad-md: 7px 16px;
  --pill-dot-size: 6px;

  /* ============================================================
     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));

  /* ============================================================
     ENTERPRISE DASHBOARD SPEC TOKENS (v1.0.0)
     Added as aliases — no breaking changes to existing tokens.
     Used by: dashboard.html, admin.html, tool pages
     ============================================================ */

  /* Brand Accent Constants */
  --brand-coral: #0066ff;
  --brand-coral-600: #0052cc;
  --brand-yellow: #FFCB2B;
  --brand-purple: #9C73F8;
  --brand-green: #26C987;
  --brand-green-500: #10B981;

  /* Spec-compliant Radius Scale (alongside existing radius tokens) */
  --spec-radius-sm: 8px;
  --spec-radius-md: 16px;
  --spec-radius-lg: 24px;
  --spec-radius-xl: 32px;
  --spec-radius-full: 9999px;

  /* Spec-compliant Typography Scale */
  --type-display-xl: clamp(2.25rem, 5vw, 3.5rem);
  --type-display-xl-leading: 1.05;
  --type-display-xl-tracking: -0.03em;
  --type-display-xl-weight: 700;

  --type-display-lg: clamp(1.75rem, 4vw, 2.375rem);
  --type-display-lg-leading: 1.1;
  --type-display-lg-tracking: -0.025em;
  --type-display-lg-weight: 700;

  --type-display-md: clamp(1.375rem, 2.5vw, 1.75rem);
  --type-display-md-leading: 1.2;
  --type-display-md-tracking: -0.02em;
  --type-display-md-weight: 600;

  --type-heading-caps: 1.125rem;
  --type-heading-caps-leading: 1.2;
  --type-heading-caps-tracking: 0.06em;
  --type-heading-caps-weight: 800;
  --type-heading-caps-transform: uppercase;

  --type-body-lg: 1rem;
  --type-body-lg-leading: 1.4;
  --type-body-lg-weight: 500;

  --type-body-md: 0.875rem;
  --type-body-md-leading: 1.4;
  --type-body-md-weight: 400;

  --type-caption: 0.6875rem;
  --type-caption-leading: 1.3;
  --type-caption-weight: 500;
  --type-caption-tracking: 0.01em;

  /* Dashboard container */
  --container-dashboard: 1600px;
  --container-dashboard-gutter: 24px;
}