/* ============================================
   AstroVault Design System — "Dark Celestial"
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================
   1. Design Tokens (CSS Custom Properties)
   ============================================ */
:root {
  /* --- Color Palette --- */
  /* Primary / Background */
  --color-bg-deep:        #060911;
  --color-bg-primary:     #0a0e1a;
  --color-bg-secondary:   #0f1428;
  --color-bg-tertiary:    #151b33;
  --color-bg-elevated:    #1a2040;

  /* Accent Colors */
  --color-accent-gold:    #f0c27f;
  --color-accent-gold-l:  #f5d9a8;
  --color-accent-teal:    #4fd1c5;
  --color-accent-teal-l:  #7ae3d8;
  --color-accent-purple:  #a78bfa;
  --color-accent-purple-l:#c4b5fd;
  --color-accent-rose:    #fb7185;
  --color-accent-blue:    #60a5fa;

  /* Cosmic Gradients */
  --gradient-primary:     linear-gradient(135deg, #0a0e1a 0%, #1a1035 50%, #0d1a2d 100%);
  --gradient-card:        linear-gradient(135deg, rgba(26, 32, 64, 0.6) 0%, rgba(15, 20, 40, 0.8) 100%);
  --gradient-accent:      linear-gradient(135deg, #f0c27f 0%, #fc5c7d 100%);
  --gradient-teal:        linear-gradient(135deg, #4fd1c5 0%, #60a5fa 100%);
  --gradient-purple:      linear-gradient(135deg, #a78bfa 0%, #ec4899 100%);
  --gradient-aurora:      linear-gradient(135deg, #4fd1c5 0%, #a78bfa 50%, #f0c27f 100%);

  /* Text Colors */
  --color-text-primary:   #f0f0f5;
  --color-text-secondary: #a0a5bd;
  --color-text-tertiary:  #6b7094;
  --color-text-muted:     #4a4f6a;
  --color-text-inverse:   #0a0e1a;

  /* Semantic Colors */
  --color-success:        #34d399;
  --color-warning:        #fbbf24;
  --color-error:          #f87171;
  --color-info:           #60a5fa;

  /* Glass Effect */
  --glass-bg:             rgba(15, 20, 40, 0.65);
  --glass-bg-light:       rgba(26, 32, 64, 0.5);
  --glass-border:         rgba(255, 255, 255, 0.08);
  --glass-border-hover:   rgba(255, 255, 255, 0.15);
  --glass-blur:           20px;

  /* --- Typography --- */
  --font-display:         'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:            'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --text-xs:     0.75rem;    /* 12px */
  --text-sm:     0.875rem;   /* 14px */
  --text-base:   1rem;       /* 16px */
  --text-lg:     1.125rem;   /* 18px */
  --text-xl:     1.25rem;    /* 20px */
  --text-2xl:    1.5rem;     /* 24px */
  --text-3xl:    1.875rem;   /* 30px */
  --text-4xl:    2.25rem;    /* 36px */
  --text-5xl:    3rem;       /* 48px */
  --text-6xl:    3.75rem;    /* 60px */

  /* Line Heights */
  --leading-tight:   1.2;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* Font Weights */
  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* --- Spacing Scale (4px base) --- */
  --space-0:   0;
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* --- Border Radius --- */
  --radius-sm:    6px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-xl:    16px;
  --radius-2xl:   24px;
  --radius-full:  9999px;

  /* --- Shadows --- */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:    0 8px 32px rgba(10, 14, 26, 0.6);
  --shadow-xl:    0 16px 48px rgba(10, 14, 26, 0.8);
  --shadow-glow-gold:  0 0 20px rgba(240, 194, 127, 0.3);
  --shadow-glow-teal:  0 0 20px rgba(79, 209, 197, 0.3);
  --shadow-glow-purple:0 0 20px rgba(167, 139, 250, 0.3);

  /* --- Transitions --- */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-spring:  500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Z-Index Scale --- */
  --z-base:       1;
  --z-dropdown:   10;
  --z-sticky:     20;
  --z-overlay:    30;
  --z-modal:      40;
  --z-toast:      50;

  /* --- Layout --- */
  --nav-height:       60px;
  --nav-bottom-height:68px;
  --sidebar-width:    260px;
  --max-content:      1200px;
  --max-content-sm:   640px;
}

/* ============================================
   2. CSS Reset & Base Styles
   ============================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--gradient-primary);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--color-accent-teal);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-teal-l);
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

::selection {
  background: rgba(240, 194, 127, 0.3);
  color: var(--color-text-primary);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ============================================
   3. Utility Classes
   ============================================ */

/* Text Utilities */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-3xl    { font-size: var(--text-3xl); }
.text-4xl    { font-size: var(--text-4xl); }

.text-gold     { color: var(--color-accent-gold); }
.text-teal     { color: var(--color-accent-teal); }
.text-purple   { color: var(--color-accent-purple); }
.text-rose     { color: var(--color-accent-rose); }
.text-muted    { color: var(--color-text-muted); }
.text-secondary{ color: var(--color-text-secondary); }

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }
.font-light   { font-weight: var(--font-light); }
.font-medium  { font-weight: var(--font-medium); }
.font-semibold{ font-weight: var(--font-semibold); }
.font-bold    { font-weight: var(--font-bold); }

.uppercase    { text-transform: uppercase; }
.tracking-wide{ letter-spacing: 0.05em; }
.tracking-wider{ letter-spacing: 0.1em; }

/* Spacing Utilities */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

/* Flex Utilities */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-center{ align-items: center; }
.items-start { align-items: flex-start; }
.items-end   { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.flex-1 { flex: 1; }

/* Grid Utilities */
.grid { display: grid; }

/* Display */
.hidden { display: none; }
.block  { display: block; }
.inline { display: inline; }

/* Overflow */
.overflow-hidden  { overflow: hidden; }
.overflow-y-auto  { overflow-y: auto; }
.overflow-x-auto  { overflow-x: auto; }
.overflow-x-hidden{ overflow-x: hidden; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

/* Width / Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Cursor */
.cursor-pointer { cursor: pointer; }

/* Truncate */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* SR Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}