@layer reset, theme, base, components, utilities;

@layer theme {
  :root {
    /* Colors */
    --color-bg-deep: #0B1120;
    --color-bg-surface: #0F172A;
    --color-bg-surface-glass: rgba(15, 23, 42, 0.65);
    
    --color-text-main: #CBD5E1;
    --color-text-heading: #FFFFFF;
    
    --color-accent-red: #E63946;
    --color-accent-blue: #457B9D;
    
    --color-border-glass: rgba(255, 255, 255, 0.1);
    
    /* Typography */
    --font-family-body: 'Inter', 'Geist', sans-serif;
    --font-family-heading: 'Rajdhani', 'Oswald', 'Roboto Condensed', sans-serif;
    
    /* Shapes */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    
    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Shadows & Glass */
    --glass-blur: 12px;
    --shadow-premium: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* Transitions */
    --transition-physical: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

@layer base {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    background-color: var(--color-bg-deep);
    color: var(--color-text-main);
    font-family: var(--font-family-body);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-text-heading);
    margin-top: 0;
    margin-bottom: var(--space-md);
    font-weight: 700;
  }
  
  a {
    color: var(--color-text-main);
    text-decoration: none;
    transition: color var(--transition-physical);
  }
  
  a:hover {
    color: var(--color-text-heading);
  }
}