@import "tailwindcss";

/* ── Theme system: light is default, .dark activates dark mode ── */
/* Surface colors are remapped so bg-surface-950 = page background, */
/* text-surface-50 = main text — in BOTH themes. The scale flips.   */

@theme inline {
  --color-brand-50: #eef6ff;
  --color-brand-100: #d9eaff;
  --color-brand-200: #bcdbff;
  --color-brand-300: #8ec5ff;
  --color-brand-400: #59a4ff;
  --color-brand-500: #3381ff;
  --color-brand-600: #1a5ff5;
  --color-brand-700: #1349e1;
  --color-brand-800: #163cb6;
  --color-brand-900: #18378f;
  --color-brand-950: #142357;

  /* Surface scale — mapped to semantic vars that flip with theme */
  --color-surface-50: var(--s-50);
  --color-surface-100: var(--s-100);
  --color-surface-200: var(--s-200);
  --color-surface-300: var(--s-300);
  --color-surface-400: var(--s-400);
  --color-surface-500: var(--s-500);
  --color-surface-600: var(--s-600);
  --color-surface-700: var(--s-700);
  --color-surface-800: var(--s-800);
  --color-surface-900: var(--s-900);
  --color-surface-950: var(--s-950);

  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}

/* ── Light theme (default) ── */
:root {
  --s-50: #020617;     /* main text — near black */
  --s-100: #0f172a;    /* heading text */
  --s-200: #1e293b;    /* strong text */
  --s-300: #475569;    /* secondary text */
  --s-400: #64748b;    /* muted text */
  --s-500: #94a3b8;    /* very muted */
  --s-600: #cbd5e1;    /* faint text */
  --s-700: #e2e8f0;    /* borders */
  --s-800: #f1f5f9;    /* card backgrounds */
  --s-900: #f8fafc;    /* secondary page bg */
  --s-950: #ffffff;    /* page background — white */
  color-scheme: light;
}

/* ── Dark theme ── */
.dark {
  --s-50: #f8fafc;     /* main text — near white */
  --s-100: #f1f5f9;    /* heading text */
  --s-200: #e2e8f0;    /* strong text */
  --s-300: #cbd5e1;    /* secondary text */
  --s-400: #94a3b8;    /* muted text */
  --s-500: #64748b;    /* very muted */
  --s-600: #475569;    /* faint text */
  --s-700: #334155;    /* borders */
  --s-800: #1e293b;    /* card backgrounds */
  --s-900: #0f172a;    /* secondary page bg */
  --s-950: #020617;    /* page background — near black */
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--color-surface-950);
  color: var(--color-surface-100);
  font-family: var(--font-sans);
  transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
  background-color: var(--color-brand-500);
  color: white;
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-300), #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

:root {
  --glass-bg: rgba(241, 245, 249, 0.5);
  --glass-border: rgba(0, 0, 0, 0.08);
}
.dark {
  --glass-bg: rgba(30, 41, 59, 0.5);
  --glass-border: rgba(148, 163, 184, 0.1);
}

.glow-border {
  box-shadow: 0 0 0 1px rgba(51, 129, 255, 0.3),
    0 0 20px rgba(51, 129, 255, 0.1);
}

.hero-glow {
  background: radial-gradient(
    ellipse 80% 60% at 50% -20%,
    rgba(51, 129, 255, 0.15),
    transparent
  );
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}
.theme-toggle:hover {
  background-color: var(--color-surface-800);
}
