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

@layer base {
  :root {
    --background: 248 250 252;
    --foreground: 15 23 42;
    --card: 255 255 255;
    --card-foreground: 15 23 42;
    --popover: 255 255 255;
    --popover-foreground: 15 23 42;
    --primary: 99 102 241;
    --primary-foreground: 255 255 255;
    --secondary: 34 211 238;
    --secondary-foreground: 248 250 252;
    --muted: 241 245 249;
    --muted-foreground: 71 85 105;
    --accent: 99 102 241;
    --accent-foreground: 15 23 42;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 34 211 238;
    --input: 34 211 238;
    --ring: 99 102 241;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 2 6 23;
    --foreground: 248 250 252;
    --card: 15 23 42;
    --card-foreground: 248 250 252;
    --popover: 15 23 42;
    --popover-foreground: 248 250 252;
    --primary: 99 102 241;
    --primary-foreground: 255 255 255;
    --secondary: 71 85 105;
    --secondary-foreground: 248 250 252;
    --muted: 248 250 252;
    --muted-foreground: 248 250 252;
    --accent: 99 102 241;
    --accent-foreground: 2 6 23;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 71 85 105;
    --input: 71 85 105;
    --ring: 99 102 241;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

/* ─────────────────────────────────────────── */
/*  DARK THEME (default)                        */
/* ─────────────────────────────────────────── */
html,
:root,
.dark {
  --color-background: #020617;
  --color-surface: #020617;
  --color-surface-elevated: #0F172A;
  --color-border: #475569;
  --color-border-subtle: #47556980;
  --color-accent: #6366F1;
  --color-accent-glow: #6366F140;
  --color-accent-dim: #6366F1;
  --color-muted: #F8FAFC;
  --color-subtle: #F8FAFC;
  --color-foreground: #F8FAFC;
  --color-foreground-muted: #F8FAFC;
  --color-foreground-subtle: #F8FAFC;
}

/* ─────────────────────────────────────────── */
/*  LIGHT THEME                                 */
/* ─────────────────────────────────────────── */
:root.light,
.light {
  --color-background: #F8FAFC;
  --color-surface: #FFFFFF;
  --color-surface-elevated: #F1F5F9;
  --color-border: #22D3EE;
  --color-border-subtle: #22D3EE60;
  --color-accent: #6366F1;
  --color-accent-glow: #6366F120;
  --color-accent-dim: #6366F1;
  --color-muted: #64748B;
  --color-subtle: #475569;
  --color-foreground: #0F172A;
  --color-foreground-muted: #475569;
  --color-foreground-subtle: #64748B;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-background);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* Selection */
::selection {
  background: var(--color-accent-glow);
  color: var(--color-foreground);
}

/* Grid background utility */
.bg-grid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(71 85 105 / 0.4)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

.light .bg-grid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(2 6 23 / 0.3)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

/* Gradient text utility */
.gradient-text {
  background: linear-gradient(
    135deg,
    var(--color-foreground) 0%,
    var(--color-accent) 50%,
    #22D3EE 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-text-blue {
  background: linear-gradient(135deg, var(--color-accent-dim) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Noise texture overlay */
.noise::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='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Glow effect */
.glow-blue {
  box-shadow: 0 0 30px var(--color-accent-glow);
}

/* Timeline */
.timeline-line {
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}
