/* =========================================================================
   NEON NOIR — Colors & Type
   Dark-mode-first. Translucent AI-modern aesthetic.
   Single source of truth for tokens. Import this file first.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

:root {
  /* -----------------------------------------------------------------------
     BACKGROUND LAYERS
     Three tiers of deep navy. Nest from bg-primary (canvas) upward.
     ----------------------------------------------------------------------- */
  --bg-primary:   #0a0e1a;   /* page canvas — deepest, near-black navy */
  --bg-secondary: #111827;   /* cards, sections, elevated surfaces       */
  --bg-tertiary:  #1a2332;   /* chips, pills, inputs, inner wells        */

  /* -----------------------------------------------------------------------
     ACCENT TRIO  — cyan · green · magenta
     Used singly as accents AND as a left-to-right gradient. Each has a
     lighter and darker sibling for gradients and press/hover states.
     ----------------------------------------------------------------------- */
  --cyan:          #06b6d4;
  --cyan-light:    #22d3ee;
  --cyan-dark:     #0891b2;

  --green:         #10b981;
  --green-light:   #34d399;
  --green-dark:    #059669;

  --magenta:       #d946ef;
  --magenta-light: #e879f9;
  --magenta-dark:  #c026d3;

  /* Signature gradient — hero titles, primary CTAs, brand mark */
  --gradient-trio: linear-gradient(90deg, var(--cyan) 0%, var(--green) 50%, var(--magenta) 100%);
  --gradient-cyan-green: linear-gradient(90deg, var(--cyan), var(--green));
  --gradient-cyan-green-vert: linear-gradient(180deg, var(--cyan), var(--green), var(--magenta));

  /* -----------------------------------------------------------------------
     FOREGROUND / TEXT
     ----------------------------------------------------------------------- */
  --fg-primary:   #f9fafb;   /* headings, body copy         */
  --fg-secondary: #9ca3af;   /* supporting copy, nav items  */
  --fg-muted:     #6b7280;   /* meta, captions, timestamps  */

  /* alias for shadcn compatibility */
  --text-primary:   var(--fg-primary);
  --text-secondary: var(--fg-secondary);
  --text-muted:     var(--fg-muted);

  /* -----------------------------------------------------------------------
     SEMANTIC
     ----------------------------------------------------------------------- */
  --destructive:            #ef4444;
  --destructive-foreground: #ffffff;
  --success:                var(--green);
  --warning:                #f59e0b;
  --info:                   var(--cyan);

  /* -----------------------------------------------------------------------
     SURFACE DETAIL — borders, rings, translucent overlays
     Borders are INTENTIONALLY white-alpha so they catch light on every
     background tier equally.
     ----------------------------------------------------------------------- */
  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);
  --ring:          var(--cyan);

  /* Tinted borders — use when a card/chip should pick up an accent */
  --border-cyan:    rgba(6, 182, 212, 0.30);
  --border-green:   rgba(16, 185, 129, 0.30);
  --border-magenta: rgba(217, 70, 239, 0.30);

  /* Translucent fills — chip/pill backgrounds, icon haloes */
  --fill-cyan-10:    rgba(6, 182, 212, 0.10);
  --fill-green-10:   rgba(16, 185, 129, 0.10);
  --fill-magenta-10: rgba(217, 70, 239, 0.10);

  /* Glass — elevated translucent panels (nav, modals, tooltips) */
  --glass-bg:     rgba(10, 14, 26, 0.80);      /* bg-primary at 80% */
  --glass-bg-2:   rgba(17, 24, 39, 0.60);      /* bg-secondary at 60% */
  --glass-blur:   16px;                         /* backdrop-blur-lg */

  /* -----------------------------------------------------------------------
     RADIUS · SHADOW · SPACING
     ----------------------------------------------------------------------- */
  --radius-sm:   0.25rem;    /* 4px  — chip edge detail   */
  --radius-md:   0.5rem;     /* 8px  — buttons, inputs    */
  --radius-lg:   0.75rem;    /* 12px — cards              */
  --radius-xl:   1rem;       /* 16px — section wells      */
  --radius-2xl:  1.5rem;     /* 24px — hero media         */
  --radius-pill: 9999px;     /* pills, badges, avatars    */
  --radius: var(--radius-md);

  /* Shadows are subtle on dark — rely on glow + border for elevation */
  --shadow-sm:    0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:    0 12px 32px rgba(0,0,0,0.55);
  --shadow-glow-cyan:    0 0 24px rgba(6, 182, 212, 0.50);
  --shadow-glow-green:   0 0 24px rgba(16, 185, 129, 0.50);
  --shadow-glow-magenta: 0 0 24px rgba(217, 70, 239, 0.50);

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

  /* -----------------------------------------------------------------------
     TYPE
     Single-family. Roboto handles everything via weight.
     ----------------------------------------------------------------------- */
  --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-weight-light:  300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold:   700;
  --font-weight-black:  900;

  /* Fluid display sizes — hero/section titles */
  --text-display:  clamp(3rem, 8vw, 6rem);       /* 48 → 96 */
  --text-title:    clamp(2rem, 5vw, 3.5rem);     /* 32 → 56 */

  --text-4xl: 2.25rem;   /* 36 */
  --text-3xl: 1.875rem;  /* 30 */
  --text-2xl: 1.5rem;    /* 24 — h1 */
  --text-xl:  1.25rem;   /* 20 — h2 */
  --text-lg:  1.125rem;  /* 18 — h3 */
  --text-base: 1rem;     /* 16 — body / h4 */
  --text-sm:  0.875rem;  /* 14 — meta */
  --text-xs:  0.75rem;   /* 12 — tag / micro */

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;

  /* shadcn compatibility aliases */
  --background: var(--bg-primary);
  --foreground: var(--fg-primary);
  --card: var(--bg-secondary);
  --card-foreground: var(--fg-primary);
  --popover: var(--bg-secondary);
  --popover-foreground: var(--fg-primary);
  --primary: var(--cyan);
  --primary-foreground: var(--bg-primary);
  --secondary: var(--bg-tertiary);
  --secondary-foreground: var(--fg-primary);
  --muted: var(--bg-tertiary);
  --muted-foreground: var(--fg-muted);
  --accent: var(--magenta);
  --accent-foreground: var(--fg-primary);
  --input: var(--bg-tertiary);
  --input-background: var(--bg-tertiary);
}

/* =========================================================================
   BASE — html/body defaults
   ========================================================================= */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-family);
  font-weight: var(--font-weight-normal);
  line-height: 1.6;
  margin: 0;
}

/* =========================================================================
   SEMANTIC TYPE — h1–h4, p, label, button defaults
   Tailwind text-* utilities override these automatically.
   ========================================================================= */
h1, h2, h3, h4 { margin: 0; color: var(--fg-primary); letter-spacing: -0.01em; }
h1 { font-size: var(--text-2xl); font-weight: var(--font-weight-bold);   line-height: 1.2; }
h2 { font-size: var(--text-xl);  font-weight: var(--font-weight-bold);   line-height: 1.3; }
h3 { font-size: var(--text-lg);  font-weight: var(--font-weight-medium); line-height: 1.4; }
h4 { font-size: var(--text-base); font-weight: var(--font-weight-medium); line-height: 1.5; }

p { margin: 0; font-weight: var(--font-weight-normal); line-height: 1.6; }
p.lead { font-size: var(--text-lg); font-weight: var(--font-weight-light); color: var(--fg-secondary); }

.display {
  font-size: var(--text-display);
  font-weight: var(--font-weight-black);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.title {
  font-size: var(--text-title);
  font-weight: var(--font-weight-black);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* =========================================================================
   UTILITY CLASSES — the "look" in one place
   ========================================================================= */

/* Gradient text — brand mark, hero title highlights */
.text-gradient {
  background: var(--gradient-trio);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  background-size: 200% 200%;
  animation: nn-gradient 6s ease infinite;
}
@keyframes nn-gradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Glass panel — translucent, blurred. Nav bars, modals, tooltips. */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--border);
}

/* Pill / chip — status badges, tags */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.375rem 0.875rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--fg-secondary);
  white-space: nowrap;
}
.pill-cyan    { color: var(--cyan);    border-color: var(--border-cyan); }
.pill-green   { color: var(--green);   border-color: var(--border-green); }
.pill-magenta { color: var(--magenta); border-color: var(--border-magenta); }

/* Floating blob — the signature "AI" ambient glow */
.blob {
  position: absolute;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(96px);
  opacity: 0.10;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: nn-blob 7s ease-in-out infinite;
}
.blob-cyan    { background: var(--cyan); }
.blob-green   { background: var(--green); animation-delay: -2s; }
.blob-magenta { background: var(--magenta); animation-delay: -4s; }
@keyframes nn-blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(24px, -48px) scale(1.08); }
  50%      { transform: translate(-24px, 24px) scale(0.94); }
  75%      { transform: translate(48px, 48px) scale(1.04); }
}

/* Hover-lift — standard card/button interaction. Never a downward press. */
.lift {
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.lift:hover { transform: translateY(-2px); }

/* Entrance animations */
@keyframes nn-fade-in    { from {opacity: 0;} to {opacity: 1;} }
@keyframes nn-fade-up    { from {opacity: 0; transform: translateY(16px);} to {opacity: 1; transform: translateY(0);} }
.animate-fade-in { animation: nn-fade-in var(--duration-slow) var(--ease-out) both; }
.animate-fade-up { animation: nn-fade-up var(--duration-slow) var(--ease-out) both; }
.delay-200 { animation-delay: 200ms; }
.delay-400 { animation-delay: 400ms; }
.delay-600 { animation-delay: 600ms; }