@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
  /* ─── Backgrounds (surface hierarchy — not pure black) ─── */
  --color-background:     #080809;
  --color-surface-1:      #0f1012;
  --color-surface-2:      #1a1d20;
  --color-surface-3:      #252a2e;

  /* ─── Borders ─── */
  --color-border:         #333339;
  --color-border-subtle:  rgba(255,255,255,0.06);
  --color-border-glass:   rgba(255,255,255,0.12);
  --color-border-hover:   rgba(255,255,255,0.20);

  /* ─── Text ─── */
  --color-foreground:           #e8e9eb;
  --color-foreground-secondary: #9ca3af;
  --color-foreground-tertiary:  #6b7280;

  /* ─── Card (maps to surface-1) ─── */
  --color-card:            #0f1012;
  --color-card-foreground: #e8e9eb;

  /* ─── Primary accent (violet — differentiated from blue/cyan AI wave) ─── */
  --color-primary:            #7c3aed;
  --color-primary-hover:      #8b5cf6;
  --color-primary-active:     #6d28d9;
  --color-primary-foreground: #ffffff;

  /* ─── Secondary / muted ─── */
  --color-secondary:            #1a1d20;
  --color-secondary-foreground: #e8e9eb;
  --color-muted:                #1a1d20;
  --color-muted-foreground:     #9ca3af;

  /* ─── Semantic ─── */
  --color-accent:             #7c3aed;
  --color-accent-foreground:  #ffffff;
  --color-destructive:        #ef4444;
  --color-success:            #10b981;
  --color-warning:            #f59e0b;
  --color-info:               #3b82f6;
  --color-ring:               #7c3aed;

  /* ─── Brand glow ─── */
  --color-brand-glow:        rgba(124,58,237,0.30);
  --color-brand-glow-strong: rgba(124,58,237,0.50);

  /* ─── Fonts ─── */
  --font-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), 'Cascadia Code', 'SF Mono', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* ─── Animation timing tokens ─── */
:root {
  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
}

/* ─── Focus ring system ─── */
:focus-visible {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
  border-radius: 4px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Custom scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: #333339; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #4b5563; }

/* ─── Glass utilities ─── */
.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.12);
}
.glass-hover:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.20);
}

.glass-subtle {
  background: rgba(255,255,255,0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.06);
}

.glass-emphasis {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.20);
}

/* Backdrop-filter fallback for unsupported browsers */
@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-subtle, .glass-emphasis { background: #1a1d20; }
}

/* ─── Gradient text utilities ─── */
.gradient-text {
  background: linear-gradient(135deg, #e8e9eb 0%, #9ca3af 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-brand {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-hero {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255,255,255,0.70) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Glow card — mouse-tracking radial gradient (set --mouse-x/y via JS) ─── */
.glow-card {
  position: relative;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(124,58,237,0.15),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 300ms;
  pointer-events: none;
  z-index: 1;
}
.glow-card:hover::before { opacity: 1; }

/* ─── Noise texture overlay ─── */
.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter 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");
  pointer-events: none;
  z-index: 0;
}

/* ─── Scroll-triggered entrance animations (CSS-only, no JS for visibility) ─── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Items are ALWAYS visible by default (no opacity:0 in SSR HTML). */
/* Animation only applies after parent gets data-entered attribute. */
[data-entered] > .animated-item {
  animation: slideUp 0.5s var(--ease-out) both;
}

/* Stagger children using nth-child */
[data-entered] > .animated-item:nth-child(1) { animation-delay: calc(var(--stagger, 0.1s) * 0); }
[data-entered] > .animated-item:nth-child(2) { animation-delay: calc(var(--stagger, 0.1s) * 1); }
[data-entered] > .animated-item:nth-child(3) { animation-delay: calc(var(--stagger, 0.1s) * 2); }
[data-entered] > .animated-item:nth-child(4) { animation-delay: calc(var(--stagger, 0.1s) * 3); }
[data-entered] > .animated-item:nth-child(5) { animation-delay: calc(var(--stagger, 0.1s) * 4); }
[data-entered] > .animated-item:nth-child(6) { animation-delay: calc(var(--stagger, 0.1s) * 5); }
[data-entered] > .animated-item:nth-child(7) { animation-delay: calc(var(--stagger, 0.1s) * 6); }

/* ─── Reduce motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
