src/index.css

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* DistractIQ — Cobalt + Glassmorphism design system. All colors HSL. */

@layer base {
  :root {
    /* Cobalt palette */
    --background: 222 47% 8%;
    --background-deep: 222 60% 5%;
    --foreground: 210 40% 96%;

    --card: 222 40% 12%;
    --card-foreground: 210 40% 96%;
    --glass: 222 50% 14%;

    --popover: 222 47% 11%;
    --popover-foreground: 210 40% 96%;

    /* Emerald primary (the IQ glow) */
    --primary: 158 84% 52%;
    --primary-foreground: 222 47% 8%;
    --primary-glow: 158 90% 60%;

    --secondary: 222 32% 18%;
    --secondary-foreground: 210 40% 96%;

    --muted: 222 30% 16%;
    --muted-foreground: 215 20% 70%;

    --accent: 199 89% 58%;
    --accent-foreground: 222 47% 8%;

    --warning: 38 95% 60%;
    --danger: 0 84% 65%;
    --success: 158 84% 52%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 96%;

    --border: 222 30% 22%;
    --input: 222 30% 18%;
    --ring: 158 84% 52%;

    --radius: 1rem;

    /* Gradients */
    --gradient-cobalt: radial-gradient(ellipse at top, hsl(222 60% 18%) 0%, hsl(222 47% 8%) 60%);
    --gradient-emerald: linear-gradient(135deg, hsl(158 84% 52%) 0%, hsl(180 80% 50%) 100%);
    --gradient-glass: linear-gradient(135deg, hsl(222 50% 18% / 0.6) 0%, hsl(222 40% 12% / 0.4) 100%);
    --gradient-danger: linear-gradient(135deg, hsl(0 84% 60%), hsl(28 90% 55%));
    --gradient-aurora: conic-gradient(from 180deg at 50% 50%, hsl(158 84% 52% / 0.15), hsl(199 89% 58% / 0.1), hsl(280 70% 60% / 0.08), hsl(158 84% 52% / 0.15));

    /* Shadows */
    --shadow-glass: 0 8px 32px 0 hsl(222 60% 4% / 0.5), inset 0 1px 0 0 hsl(210 40% 96% / 0.06);
    --shadow-glow: 0 0 40px hsl(158 84% 52% / 0.35);
    --shadow-elevated: 0 20px 60px -10px hsl(222 80% 2% / 0.8);

    /* Motion */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html, body, #root {
    @apply min-h-screen;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    background: var(--gradient-cobalt);
    background-attachment: fixed;
    font-feature-settings: "ss01", "cv11";
  }

  h1, h2, h3, h4 {
    @apply font-display tracking-tight;
  }

  /* Aurora glow ambient */
  body::before {
    content: "";
    position: fixed;
    inset: -20%;
    background: var(--gradient-aurora);
    filter: blur(120px);
    opacity: 0.45;
    z-index: -1;
    pointer-events: none;
    animation: aurora-drift 30s linear infinite;
  }

  @keyframes aurora-drift {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

@layer components {
  .glass {
    background: var(--gradient-glass);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid hsl(210 40% 96% / 0.08);
    box-shadow: var(--shadow-glass);
  }

  .glass-strong {
    background: hsl(222 45% 14% / 0.75);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid hsl(210 40% 96% / 0.1);
    box-shadow: var(--shadow-elevated);
  }

  .text-gradient-emerald {
    background: var(--gradient-emerald);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .glow-emerald {
    box-shadow: var(--shadow-glow);
  }

  .ring-divider {
    background: linear-gradient(90deg, transparent, hsl(210 40% 96% / 0.15), transparent);
    height: 1px;
  }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(222 40% 22%); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: hsl(158 84% 42%); }