/* =========================================================
   Design Tokens — Param Budhathoki / AI-native portfolio
   Dark-first. Light variant via [data-theme="light"].
   ========================================================= */

:root {
  /* Color — surfaces */
  --bg-0: #0a0a0c;
  --bg-1: #101014;
  --bg-2: #18181b;
  --bg-3: #1f1f23;
  --surface: rgba(24, 24, 27, 0.72);
  --surface-strong: rgba(24, 24, 27, 0.92);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* Color — text */
  --text-0: #fafafa;
  --text-1: #e4e4e7;
  --text-2: #a1a1aa;
  --text-3: #71717a;

  /* Color — brand & accents */
  --accent: #22d3ee;          /* cyan — opencode */
  --accent-2: #f59e0b;        /* amber — claude-code */
  --accent-3: #a855f7;        /* purple — copilot */
  --accent-4: #10b981;        /* emerald */
  --accent-5: #ec4899;        /* pink */
  --accent-soft: rgba(34, 211, 238, 0.14);
  --accent-glow: 0 0 24px rgba(34, 211, 238, 0.35);

  /* Agent palette (mirrored from worker) */
  --agent-opencode: #22d3ee;
  --agent-claude-code: #f59e0b;
  --agent-copilot: #a855f7;
  --agent-codex: #94a3b8;
  --agent-aider: #94a3b8;
  --agent-other: #94a3b8;

  /* State */
  --success: #10b981;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #22d3ee;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale (fluid) */
  --fs-xs:  clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm:  clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  --fs-md:  clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --fs-lg:  clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
  --fs-xl:  clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-2xl: clamp(1.9rem, 1.6rem + 1.4vw, 2.6rem);
  --fs-3xl: clamp(2.6rem, 2rem + 2.6vw, 4rem);
  --fs-4xl: clamp(3.2rem, 2.4rem + 3.6vw, 5.5rem);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 9999px;

  /* Shadow */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-3: 0 20px 60px rgba(0,0,0,0.5);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 120ms;
  --t-med: 220ms;
  --t-slow: 480ms;

  /* Layout */
  --container: 1180px;
  --gutter: clamp(1rem, 2vw, 2rem);
  --nav-h: 64px;
  --banner-h: 32px;

  color-scheme: dark;
}

/* Light theme override */
[data-theme="light"] {
  --bg-0: #fafafa;
  --bg-1: #ffffff;
  --bg-2: #f4f4f5;
  --bg-3: #e4e4e7;
  --surface: rgba(255,255,255,0.78);
  --surface-strong: rgba(255,255,255,0.95);
  --border: rgba(0,0,0,0.08);
  --border-strong: rgba(0,0,0,0.16);
  --text-0: #09090b;
  --text-1: #18181b;
  --text-2: #52525b;
  --text-3: #71717a;
  --accent-soft: rgba(34, 211, 238, 0.18);
  color-scheme: light;
}

/* =========================================================
   Base reset & body
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + var(--banner-h) + 0.5rem);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--text-1);
  background: var(--bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--text-0); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--bg-0); }

/* =========================================================
   Layout utilities
   ========================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--sp-9); position: relative; }
.section--lg { padding-block: var(--sp-10); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px; background: var(--accent);
}
.h-display {
  font-size: var(--fs-4xl);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-0);
  margin: 0 0 var(--sp-5);
}
.h-section {
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--text-0);
  margin: var(--sp-3) 0 var(--sp-5);
}
.lede {
  font-size: var(--fs-lg);
  color: var(--text-2);
  max-width: 62ch;
}

/* Background ambience */
.bg-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 30%, transparent 75%);
}
.bg-glow {
  position: absolute; inset: -20% -10% auto -10%; height: 70vh; z-index: 0;
  background:
    radial-gradient(50% 50% at 20% 30%, rgba(34,211,238,0.18), transparent 60%),
    radial-gradient(45% 45% at 80% 20%, rgba(168,85,247,0.16), transparent 60%),
    radial-gradient(40% 50% at 60% 80%, rgba(245,158,11,0.10), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.card:hover { border-color: var(--border-strong); transform: translateY(-2px); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  color: var(--text-0);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  transition: transform var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text-0); }
.btn--primary {
  background: linear-gradient(135deg, var(--accent), #38bdf8);
  color: #0a0a0c;
  border-color: transparent;
  box-shadow: var(--accent-glow);
}
.btn--primary:hover { color: #0a0a0c; filter: brightness(1.05); }
.btn--ghost { background: transparent; }

/* Chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
}
.chip .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--accent); }
.chip--live .dot { background: var(--success); box-shadow: 0 0 0 0 rgba(16,185,129,0.7); animation: pulse 1.8s var(--ease-in-out) infinite; }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,0.65); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Agent badge */
.agent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: color-mix(in oklab, var(--agent-color, var(--accent)) 14%, transparent);
  color: var(--agent-color, var(--accent));
  border: 1px solid color-mix(in oklab, var(--agent-color, var(--accent)) 30%, transparent);
}

/* Tabs */
.tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-full); }
.tab {
  padding: 0.5rem 1rem;
  border-radius: var(--r-full);
  font-size: var(--fs-sm);
  color: var(--text-2);
  background: transparent;
  border: none;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tab[aria-selected="true"] { background: var(--bg-3); color: var(--text-0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Visually hidden but accessible */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}