/* ============================================================
   ASTRA 2.0 — DESIGN SYSTEM
   Premium Personal Growth & Wellness Application
   ============================================================ */

:root {
  /* Core Palette (Dark Mode - Default) */
  --astra-midnight: #0B1020;
  --astra-deep-navy: #11182B;
  --astra-surface: #171F34;
  --astra-surface-elevated: #1F2A44;
  --astra-surface-subtle: rgba(23, 31, 52, 0.7);

  --astra-violet: #A78BFA;
  --astra-lavender: #C4B5FD;
  --astra-gold: #D6B77A;
  --astra-gold-soft: rgba(214, 183, 122, 0.15);
  --astra-sage: #8DB9A3;
  --astra-sage-soft: rgba(141, 185, 163, 0.15);
  --astra-rose: #E0829D;

  --astra-white: #F5F3FA;
  --astra-text-main: #F5F3FA;
  --astra-text-secondary: #CBD5E1;
  --astra-text-muted: #9CA3AF;
  --astra-text-dim: #64748B;

  --astra-border-subtle: rgba(255, 255, 255, 0.08);
  --astra-border-accent: rgba(167, 139, 250, 0.25);
  --astra-border-gold: rgba(214, 183, 122, 0.3);

  --astra-shadow-card: 0 10px 30px -10px rgba(3, 7, 18, 0.5);
  --astra-shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.6);
  --astra-shadow-subtle: 0 2px 10px rgba(0, 0, 0, 0.2);

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 9999px;

  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.33, 1, 0.68, 1);
  --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --sidebar-width: 270px;
  --bottom-nav-height: 68px;
}

/* Light Theme Variables */
[data-theme="light"] {
  --astra-midnight: #F5F5FA;
  --astra-deep-navy: #EAEBF2;
  --astra-surface: #FFFFFF;
  --astra-surface-elevated: #F8F9FC;
  --astra-surface-subtle: rgba(255, 255, 255, 0.85);

  --astra-violet: #7C3AED;
  --astra-lavender: #6D28D9;
  --astra-gold: #B4882F;
  --astra-gold-soft: rgba(180, 136, 47, 0.12);
  --astra-sage: #458B68;
  --astra-sage-soft: rgba(69, 139, 104, 0.12);
  --astra-rose: #C2410C;

  --astra-white: #0B1020;
  --astra-text-main: #0F172A;
  --astra-text-secondary: #334155;
  --astra-text-muted: #64748B;
  --astra-text-dim: #94A3B8;

  --astra-border-subtle: rgba(15, 23, 42, 0.08);
  --astra-border-accent: rgba(124, 58, 237, 0.2);
  --astra-border-gold: rgba(180, 136, 47, 0.25);

  --astra-shadow-card: 0 10px 30px -10px rgba(100, 116, 139, 0.12);
  --astra-shadow-elevated: 0 20px 40px -15px rgba(100, 116, 139, 0.18);
  --astra-shadow-subtle: 0 2px 8px rgba(15, 23, 42, 0.06);
}

/* Base Reset & Box Sizing */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  min-height: 100vh;
  background-color: var(--astra-midnight);
  color: var(--astra-text-main);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Background Atmosphere Pattern */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(167, 139, 250, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 90%, rgba(214, 183, 122, 0.05) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(11, 16, 32, 0.2) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

[data-theme="light"] body::before {
  background: 
    radial-gradient(ellipse 60% 40% at 20% 0%, rgba(124, 58, 237, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 90%, rgba(180, 136, 47, 0.04) 0%, transparent 60%);
}

/* Layout Container */
.astra-app-layout {
  display: flex;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* Main Content Area */
.astra-main-content {
  flex: 1;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 16px) 16px calc(var(--bottom-nav-height) + var(--safe-bottom) + 24px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (min-width: 992px) {
  .astra-main-content {
    margin-left: var(--sidebar-width);
    padding: 32px 40px 60px;
    max-width: 1100px;
  }
}

/* Typography Standards */
h1, h2, h3, h4, h5 {
  color: var(--astra-text-main);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.brand-title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--astra-text-main);
}

.brand-payoff {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--astra-gold);
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}