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

/* @group-priority: primary, indigo, error, warning, success */

/* ============================================
   LAYER 1 — BRAND SCALES (definition only)
   ============================================ */

:root {

  /* === Color Scales === */

  /* primary */
  --bg-primary-50: #E6FFFE; /* AI-generated */
  --bg-primary-100: #B3FFFC; /* AI-generated */
  --bg-primary-200: #80FFFA; /* AI-generated */
  --bg-primary-300: #40FFF5; /* AI-generated */
  --bg-primary-400: #00F8E8; /* AI-generated */
  --bg-primary-500: #00F0DE; /* @primary */ /* AI-generated */
  --bg-primary-600: #00C4B5; /* AI-generated */
  --bg-primary-700: #009B8E; /* AI-generated */
  --bg-primary-800: #007468; /* AI-generated */
  --bg-primary-900: #004D45; /* AI-generated */

  /* indigo */
  --bg-indigo-50: #EEF2FF; /* AI-generated */
  --bg-indigo-100: #E0E7FF; /* AI-generated */
  --bg-indigo-200: #C7D2FE; /* AI-generated */
  --bg-indigo-300: #A5B4FC; /* AI-generated */
  --bg-indigo-400: #818CF8; /* AI-generated */
  --bg-indigo-500: #6366F1; /* @primary */ /* AI-generated */
  --bg-indigo-600: #4F46E5; /* AI-generated */
  --bg-indigo-700: #4338CA; /* AI-generated */
  --bg-indigo-800: #3730A3; /* AI-generated */
  --bg-indigo-900: #312E81; /* AI-generated */

  /* success */
  --bg-success-50: #ECFDF5; /* AI-generated */
  --bg-success-100: #D1FAE5; /* AI-generated */
  --bg-success-200: #A7F3D0; /* AI-generated */
  --bg-success-300: #6EE7B7; /* AI-generated */
  --bg-success-400: #34D399; /* @primary */ /* AI-generated */
  --bg-success-500: #10B981; /* AI-generated */
  --bg-success-600: #059669; /* AI-generated */
  --bg-success-700: #047857; /* AI-generated */
  --bg-success-800: #065F46; /* AI-generated */
  --bg-success-900: #064E3B; /* AI-generated */

  /* warning */
  --bg-warning-50: #FFFBEB; /* AI-generated */
  --bg-warning-100: #FEF3C7; /* AI-generated */
  --bg-warning-200: #FDE68A; /* AI-generated */
  --bg-warning-300: #FCD34D; /* AI-generated */
  --bg-warning-400: #FBBF24; /* AI-generated */
  --bg-warning-500: #FFB020; /* @primary */ /* AI-generated */
  --bg-warning-600: #D97706; /* AI-generated */
  --bg-warning-700: #B45309; /* AI-generated */
  --bg-warning-800: #92400E; /* AI-generated */
  --bg-warning-900: #78350F; /* AI-generated */

  /* error */
  --bg-error-50: #FEF2F2; /* AI-generated */
  --bg-error-100: #FEE2E2; /* AI-generated */
  --bg-error-200: #FECACA; /* AI-generated */
  --bg-error-300: #FCA5A5; /* AI-generated */
  --bg-error-400: #F87171; /* AI-generated */
  --bg-error-500: #FF5757; /* @primary */ /* AI-generated */
  --bg-error-600: #EF4444; /* AI-generated */
  --bg-error-700: #DC2626; /* AI-generated */
  --bg-error-800: #B91C1C; /* AI-generated */
  --bg-error-900: #7F1D1D; /* AI-generated */

  /* surface */
  --bg-surface-50: #F0F2F5; /* AI-generated */
  --bg-surface-100: #D4D8DE; /* AI-generated */
  --bg-surface-200: #A8AEB6; /* AI-generated */
  --bg-surface-300: #7C848E; /* AI-generated */
  --bg-surface-400: #505A66; /* AI-generated */
  --bg-surface-500: #2A3140; /* AI-generated */
  --bg-surface-600: #1A2030; /* AI-generated */
  --bg-surface-700: #0D1117; /* @primary */ /* AI-generated */
  --bg-surface-800: #0A0E14; /* AI-generated */
  --bg-surface-900: #06080F; /* AI-generated */

  /* text */
  --bg-text-50: #F0F2F5; /* AI-generated */
  --bg-text-100: #D4D8DE; /* AI-generated */
  --bg-text-200: #A8AEB6; /* AI-generated */
  --bg-text-300: #7C848E; /* AI-generated */
  --bg-text-400: #505A66; /* AI-generated */
  --bg-text-500: #3A4250; /* AI-generated */
  --bg-text-600: #2A3140; /* AI-generated */
  --bg-text-700: #1A2030; /* AI-generated */
  --bg-text-800: #0D1117; /* AI-generated */
  --bg-text-900: #06080F; /* AI-generated */

  /* ============================================
     LAYER 2 — SHORT ALIASES
     ============================================ */

  --background: var(--bg-surface-900); /* AI-generated */
  --surface: var(--bg-surface-700); /* AI-generated */
  --surface-dim: var(--bg-surface-800); /* AI-generated */
  --surface-container: var(--bg-surface-600); /* AI-generated */
  --surface-container-high: var(--bg-surface-500); /* AI-generated */
  --fg: var(--bg-text-50); /* AI-generated */
  --muted: var(--bg-text-300); /* AI-generated */
  --rule: var(--bg-surface-400); /* AI-generated */
  --accent: var(--bg-primary-500); /* AI-generated */
  --accent-hover: var(--bg-primary-600); /* AI-generated */
  --link: var(--bg-primary-400); /* AI-generated */
  --error: var(--bg-error-500); /* AI-generated */
  --error-container: var(--bg-error-100); /* AI-generated */
  --on-error: #FFFFFF; /* AI-generated */
  --on-error-container: var(--bg-error-800); /* AI-generated */

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

  --font-display: 'Sora', sans-serif;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --font-size-display: 56px;
  --font-size-h1: 40px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-h4: 20px;
  --font-size-body: 16px;
  --font-size-lead: 18px;
  --font-size-caption: 12px;
  --font-size-eyebrow: 11px;
  --font-size-mono: 14px;

  --font-weight-display: 700;
  --font-weight-h1: 700;
  --font-weight-h2: 600;
  --font-weight-h3: 600;
  --font-weight-h4: 600;
  --font-weight-body: 400;
  --font-weight-lead: 400;
  --font-weight-caption: 400;
  --font-weight-eyebrow: 600;
  --font-weight-mono: 400;

  --line-height-display: 1.1;
  --line-height-h1: 1.2;
  --line-height-h2: 1.25;
  --line-height-h3: 1.3;
  --line-height-h4: 1.4;
  --line-height-body: 1.6;
  --line-height-lead: 1.7;
  --line-height-caption: 1.5;
  --line-height-eyebrow: 1.4;
  --line-height-mono: 1.6;

  /* ============================================
     SPACING
     ============================================ */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ============================================
     SIZING
     ============================================ */

  --size-button-sm: 32px;
  --size-button-md: 40px;
  --size-button-lg: 48px;
  --size-input-height: 40px;
  --size-icon-sm: 16px;
  --size-icon-md: 20px;
  --size-icon-lg: 24px;

  /* ============================================
     RADIUS
     ============================================ */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS
     ============================================ */

  --shadow-1: 0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20); /* Card */
  --shadow-2: 0 4px 8px rgba(0,0,0,.35); /* Card Hover */
  --shadow-3: 0 8px 24px rgba(0,0,0,.40); /* Float */
  --shadow-4: 0 16px 40px rgba(0,0,0,.50); /* Modal */
  --shadow-5: 0 24px 60px rgba(0,0,0,.60); /* Overlay */

  /* ============================================
     SEMANTIC ALIAS LAYER (Layer 3 — consumer-facing)
     ============================================ */

  /* === Surface & Background === */
  --color-background: var(--background);
  --color-foreground: var(--fg);
  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-container: var(--surface-container);
  --color-surface-container-low: var(--surface);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-variant: var(--surface-container-high);
  --color-card: var(--surface);
  --color-border: var(--rule);

  /* === Text === */
  --color-on-surface: var(--fg);
  --color-on-surface-variant: var(--muted);
  --color-muted-foreground: var(--muted);

  /* === Brand/Primary === */
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-on-primary: #FFFFFF;
  --color-secondary: var(--bg-indigo-500);

  /* === Functional Status === */
  --color-success: var(--bg-success-400);
  --color-warning: var(--bg-warning-500);
  --color-error: var(--error);

  /* === Error === */
  --color-error-container: var(--error-container);
  --color-on-error: var(--on-error);
  --color-on-error-container: var(--on-error-container);

  /* === Radius === */
  --color-radius-sm: 4px;
  --color-radius-md: 8px;
  --color-radius-lg: 12px;
  --color-radius-xl: 16px;
  --color-radius-full: 9999px;

  /* === Typography === */
  --type-display-sm: var(--font-size-h2);
  --type-heading-sm: var(--font-size-h4);
  --type-body-md: var(--font-size-body);
  --type-body-sm: var(--font-size-caption);

  /* === Font family === */
  --font-family-base: var(--font-body);
}

/* ============================================
   DARK THEME
   ============================================ */

.dark {
  --background: var(--bg-surface-900); /* AI-generated */
  --surface: var(--bg-surface-800); /* AI-generated */
  --surface-dim: var(--bg-surface-900); /* AI-generated */
  --surface-container: var(--bg-surface-700); /* AI-generated */
  --surface-container-high: var(--bg-surface-600); /* AI-generated */
  --fg: #FFFFFF; /* AI-generated */
  --muted: var(--bg-text-200); /* AI-generated */
  --rule: var(--bg-surface-500); /* AI-generated */

  /* === Surface & Background aliases === */
  --color-background: var(--background);
  --color-foreground: var(--fg);
  --color-surface: var(--surface);
  --color-surface-dim: var(--surface-dim);
  --color-surface-container: var(--surface-container);
  --color-surface-container-low: var(--surface);
  --color-surface-container-high: var(--surface-container-high);
  --color-surface-variant: var(--surface-container-high);
  --color-card: var(--surface);
  --color-border: var(--rule);

  /* === Text aliases === */
  --color-on-surface: var(--fg);
  --color-on-surface-variant: var(--muted);
  --color-muted-foreground: var(--muted);
}

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

.bg-display { font-family: var(--font-display); font-size: 3.5rem; font-weight: var(--font-weight-display); line-height: var(--line-height-display); letter-spacing: -0.02em; }
.bg-h1 { font-family: var(--font-heading); font-size: 2.5rem; font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); }
.bg-h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: var(--font-weight-h2); line-height: var(--line-height-h2); }
.bg-h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--font-weight-h3); line-height: var(--line-height-h3); }
.bg-h4 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--font-weight-h4); line-height: var(--line-height-h4); }
.bg-body { font-family: var(--font-body); font-size: 1rem; font-weight: var(--font-weight-body); line-height: var(--line-height-body); }
.bg-lead { font-family: var(--font-body); font-size: 1.125rem; font-weight: var(--font-weight-lead); line-height: var(--line-height-lead); }
.bg-caption { font-family: var(--font-body); font-size: 0.75rem; font-weight: var(--font-weight-caption); line-height: var(--line-height-caption); }
.bg-eyebrow { font-family: var(--font-body); font-size: 0.6875rem; font-weight: var(--font-weight-eyebrow); line-height: var(--line-height-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; }
.bg-mono { font-family: var(--font-mono); font-size: 0.875rem; font-weight: var(--font-weight-mono); line-height: var(--line-height-mono); }