/* ============================================
   ASTROCHARTS — Design System Tokens v1.0
   Dark Cosmic Premium Theme
   Extracted from Landing Page Mockup
   ============================================ */

:root {
  /* ---- Background Layers ---- */
  --bg-deep:       #070A12;
  --bg-base:       #0A0A1A;
  --bg-surface:    #0C1220;
  --bg-surface-2:  #111B2E;
  --bg-surface-3:  #1A1230;
  --bg-card:       rgba(21, 16, 42, 0.82);
  --bg-card-hover: rgba(30, 20, 53, 0.88);

  /* ---- Glass / Overlay ---- */
  --glass-bg:      rgba(15, 12, 30, 0.75);
  --glass-border:  rgba(123, 63, 190, 0.25);
  --glass-blur:    20px;

  /* ---- Brand Colors ---- */
  --brand:         #7C5CFF;
  --brand-light:   #9B7AFF;
  --brand-dark:    #5A3CD4;
  --brand-glow:    rgba(124, 92, 255, 0.25);

  /* ---- Accent: Gold (CTAs) ---- */
  --gold:          #D4A04A;
  --gold-light:    #E8B960;
  --gold-dark:     #C4943A;
  --gold-gradient: linear-gradient(135deg, #C4943A 0%, #E8B960 50%, #D4A04A 100%);
  --gold-glow:     0 0 24px rgba(212, 160, 74, 0.35);

  /* ---- Accent: Cyan (sparsam) ---- */
  --accent:        #22D3EE;
  --accent-light:  #67E8F9;
  --accent-glow:   rgba(34, 211, 238, 0.20);

  /* ---- Accent: Green (Credits/Success) ---- */
  --green:         #4ADE80;
  --green-dark:    #22C55E;
  --green-glow:    rgba(74, 222, 128, 0.20);

  /* ---- Nebula / Atmospheric ---- */
  --nebula-purple: #5E2D6E;
  --nebula-pink:   #8B3A8B;
  --nebula-blue:   #1E3A5F;

  /* ---- Text ---- */
  --text:          rgba(255, 255, 255, 0.95);
  --text-muted:    rgba(255, 255, 255, 0.78);
  --text-subtle:   rgba(255, 255, 255, 0.55);
  --text-on-gold:  #1A1A2E;

  /* ---- Borders ---- */
  --border:        rgba(255, 255, 255, 0.08);
  --border-light:  rgba(255, 255, 255, 0.12);
  --border-glow:   rgba(107, 63, 160, 0.30);

  /* ---- Shadows ---- */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 40px rgba(124, 92, 255, 0.15);

  /* ---- Radius ---- */
  --radius-sm:     8px;
  --radius-md:     14px;
  --radius-lg:     18px;
  --radius-xl:     24px;
  --radius-pill:   9999px;

  /* ---- Typography ---- */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:  'Space Grotesk', 'Inter', sans-serif;

  --text-xs:       0.75rem;    /* 12px */
  --text-sm:       0.8125rem;  /* 13px */
  --text-base:     0.9375rem;  /* 15px */
  --text-lg:       1.125rem;   /* 18px */
  --text-xl:       1.25rem;    /* 20px */
  --text-2xl:      1.5rem;     /* 24px */
  --text-3xl:      2rem;       /* 32px */
  --text-4xl:      2.5rem;     /* 40px */
  --text-5xl:      3rem;       /* 48px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* ---- Spacing Scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- Layout ---- */
  --max-width:     1140px;
  --nav-height:    68px;
  --nav-offset:    calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  --touch-min:     44px;

  /* ---- Transitions ---- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* ---- Z-Index Scale ---- */
  --z-base:    1;
  --z-card:    10;
  --z-nav:     100;
  --z-modal:   200;
  --z-toast:   300;

  /* ---- Compatibility aliases used by legacy components ---- */
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --bg-hover: var(--bg-card-hover);
  --border-primary: var(--border);
  --border-default: var(--border);
  --primary: var(--brand);
  --primary-rgb: 124, 92, 255;
  --primary-400: var(--brand-light);
  --primary-500: var(--brand);
  --secondary-400: var(--gold-light);
  --success: var(--green);
  --error: #f87171;
}

html[data-theme="light"] {
  color-scheme: light;
  --bg-deep:       #F9F7F2;
  --bg-base:       #FBF9F8;
  --bg-surface:    #FFFFFF;
  --bg-surface-2:  #F5F3F0;
  --bg-surface-3:  #F0EEEA;
  --bg-card:       rgba(255, 255, 255, 0.92);
  --bg-card-hover: rgba(249, 247, 242, 0.98);
  --glass-bg:      rgba(255, 255, 255, 0.78);
  --glass-border:  rgba(175, 147, 91, 0.24);
  --brand:         #AF935B;
  --brand-light:   #C7AA70;
  --brand-dark:    #725B29;
  --brand-glow:    rgba(175, 147, 91, 0.18);
  --gold:          #AF935B;
  --gold-light:    #D2B16F;
  --gold-dark:     #725B29;
  --gold-gradient: linear-gradient(135deg, #725B29 0%, #D2B16F 55%, #AF935B 100%);
  --gold-glow:     0 0 20px rgba(175, 147, 91, 0.22);
  --accent:        #0F766E;
  --accent-light:  #14B8A6;
  --accent-glow:   rgba(20, 184, 166, 0.16);
  --green:         #15803D;
  --green-dark:    #166534;
  --green-glow:    rgba(21, 128, 61, 0.16);
  --nebula-purple: #E9DDF3;
  --nebula-pink:   #F6E0EA;
  --nebula-blue:   #DCEAF8;
  --text:          #1B1C1C;
  --text-muted:    #4B4B4B;
  --text-subtle:   #6B6B6B;
  --text-on-gold:  #FFFFFF;
  --border:        rgba(114, 91, 41, 0.16);
  --border-light:  rgba(114, 91, 41, 0.24);
  --border-glow:   rgba(175, 147, 91, 0.28);
  --shadow-sm:     0 2px 8px rgba(45, 45, 45, 0.08);
  --shadow-md:     0 8px 24px rgba(45, 45, 45, 0.10);
  --shadow-lg:     0 18px 48px rgba(45, 45, 45, 0.14);
  --shadow-glow:   0 0 34px rgba(175, 147, 91, 0.14);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --bg-hover: var(--bg-card-hover);
  --border-primary: var(--border);
  --border-default: var(--border);
  --primary: var(--brand);
  --primary-rgb: 175, 147, 91;
  --primary-400: var(--brand-light);
  --primary-500: var(--brand);
  --secondary-400: var(--gold-light);
  --success: var(--green);
  --error: #BA1A1A;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

.theme-toggle.astro-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: var(--glass-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.theme-toggle.astro-theme-toggle:hover,
.theme-toggle.astro-theme-toggle:focus-visible {
  color: var(--gold-light);
  border-color: var(--gold);
  background: var(--bg-card-hover);
  transform: translateY(-1px);
  outline: none;
}

html[data-theme="dark"] .theme-toggle.astro-theme-toggle .icon-moon,
html[data-theme="light"] .theme-toggle.astro-theme-toggle .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle.astro-theme-toggle .icon-sun,
html[data-theme="light"] .theme-toggle.astro-theme-toggle .icon-moon {
  display: inline-block;
}

.mobile-nav-theme {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

html[data-theme="light"] body {
  background: var(--bg-base);
  color: var(--text);
}

html[data-theme="light"] .nav,
html[data-theme="light"] .mobile-nav,
html[data-theme="light"] .auth-card,
html[data-theme="light"] .dashboard-page .stat-card,
html[data-theme="light"] .chart-list-item,
html[data-theme="light"] .credit-wallet-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .auth-page {
  background: radial-gradient(circle at top left, rgba(175,147,91,0.18), transparent 34%), var(--bg-base);
}

html[data-theme="light"] .dashboard-page h3,
html[data-theme="light"] .dashboard-section-header h2,
html[data-theme="light"] .dashboard-header h1,
html[data-theme="light"] .auth-brand-name,
html[data-theme="light"] .chart-list-name,
html[data-theme="light"] .analysis-list-name {
  color: var(--text) !important;
}

html[data-theme="light"] .dashboard-empty,
html[data-theme="light"] .dashboard-loading,
html[data-theme="light"] .auth-subtitle,
html[data-theme="light"] .auth-desc,
html[data-theme="light"] .chart-list-meta,
html[data-theme="light"] .chart-list-date {
  color: var(--text-muted) !important;
}