@layer base, layout, components, utilities;

@layer base {
  :root {
    /* Default Dark Theme Variables */
    --bg-main: oklch(15% 0.02 260);
    --bg-card: oklch(20% 0.03 260 / 0.7);
    --text-primary: oklch(95% 0.01 260);
    --text-secondary: oklch(75% 0.02 260);
    --accent-glow: oklch(70% 0.15 150); /* Emerald Green */
    --accent-secondary: oklch(65% 0.18 300); /* Vibrant Purple */
    --accent-warm: oklch(75% 0.16 70); /* Warm Amber */
    
    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-deep: 0 20px 25px -5px rgb(0 0 0 / 0.2), 0 8px 10px -6px rgb(0 0 0 / 0.2);
    --glow-effect: 0 0 20px var(--accent-glow);
    
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --border-radius: 1.25rem;
  }

  [data-theme='light'] {
    --bg-main: oklch(98% 0.01 260);
    --bg-card: oklch(100% 0 0 / 0.8);
    --text-primary: oklch(20% 0.02 260);
    --text-secondary: oklch(45% 0.03 260);
    --accent-glow: oklch(65% 0.2 150);
    --accent-secondary: oklch(60% 0.2 300);
    --accent-warm: oklch(70% 0.18 70);
    
    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-deep: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --glow-effect: 0 0 15px oklch(65% 0.2 150 / 0.4);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-family);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    position: relative;
  }

  /* Premium Noise Texture Effect */
  .noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3%3Ffilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    z-index: 9999;
  }
}

@layer layout {
  header {
    margin: 3rem 1rem 2rem;
    text-align: center;
    z-index: 10;
  }

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }

  .logo-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px var(--accent-glow));
  }

  h1 {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.05em;
    background: linear-gradient(to right, var(--text-primary), var(--accent-glow));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .subtitle {
    color: var(--text-secondary);
    font-size: 1.1rem;
    font-weight: 400;
  }

  main {
    flex: 1;
    width: 100%;
    max-width: 800px;
    padding: 0 1.5rem 3rem;
    z-index: 10;
  }

  footer {
    padding: 2rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
    opacity: 0.6;
  }
}

@layer components {
  /* Glassmorphism Card Style */
  .glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow-deep);
  }

  /* Button Premium Glow */
  .btn-primary {
    background: linear-gradient(135deg, var(--accent-glow), oklch(60% 0.15 160));
    color: oklch(10% 0.02 260);
    border: none;
    border-radius: 0.75rem;
    padding: 1rem 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 15px oklch(70% 0.15 150 / 0.3);
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px oklch(70% 0.15 150 / 0.5), var(--glow-effect);
  }

  .btn-primary:active {
    transform: scale(0.98);
  }
}

@layer utilities {
  .flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .text-glow {
    text-shadow: 0 0 10px var(--accent-glow);
  }
}