/* ============================================================
   Sathya Sankar — Portfolio
   Design tokens + base styles
   Display: Space Grotesk · Body: Hanken Grotesk · Mono: JetBrains Mono
   ============================================================ */

:root {
  /* ---- Color: dark (default) ---- */
  --bg:            #0a0b0d;
  --bg-2:         #0e1014;
  --surface:      #121419;
  --surface-2:    #171a20;
  --elevated:     #1c2027;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text:         #e9ebef;
  --text-2:       #aab0ba;
  --text-3:       #6b727d;

  /* accent — electric blue */
  --accent:       oklch(0.68 0.17 255);
  --accent-soft:  oklch(0.68 0.17 255 / 0.14);
  --accent-line:  oklch(0.68 0.17 255 / 0.32);
  --accent-ink:   #0a0b0d;          /* text on accent fills */
  /* verified / shipped — terminal green, used sparingly */
  --ok:           oklch(0.78 0.15 165);
  --ok-soft:      oklch(0.78 0.15 165 / 0.14);

  /* ---- Type ---- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* fluid type scale */
  --fs-eyebrow: 0.78rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lead:    clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3.1rem);
  --fs-display: clamp(2.5rem, 1.5rem + 4.1vw, 4.5rem);

  /* ---- Spacing / radius / shadow ---- */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px -12px rgba(0,0,0,0.6);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 24px 60px -24px rgba(0,0,0,0.75);
  --glow:    0 0 0 1px var(--accent-line), 0 8px 40px -8px oklch(0.68 0.17 255 / 0.35);

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;

  --grid-line: rgba(255,255,255,0.035);
}

[data-theme="light"] {
  --bg:            #f7f8fa;
  --bg-2:         #eef0f4;
  --surface:      #ffffff;
  --surface-2:    #f4f6f9;
  --elevated:     #ffffff;
  --border:       rgba(10, 12, 18, 0.10);
  --border-strong: rgba(10, 12, 18, 0.18);
  --text:         #15181d;
  --text-2:       #4a525e;
  --text-3:       #828b97;
  --accent:       oklch(0.55 0.18 258);
  --accent-soft:  oklch(0.55 0.18 258 / 0.10);
  --accent-line:  oklch(0.55 0.18 258 / 0.28);
  --accent-ink:   #ffffff;
  --ok:           oklch(0.55 0.15 162);
  --ok-soft:      oklch(0.55 0.15 162 / 0.12);
  --shadow-1: 0 1px 2px rgba(10,12,18,0.04), 0 12px 30px -16px rgba(10,12,18,0.18);
  --shadow-2: 0 2px 4px rgba(10,12,18,0.05), 0 30px 60px -28px rgba(10,12,18,0.25);
  --glow:    0 0 0 1px var(--accent-line), 0 10px 40px -10px oklch(0.55 0.18 258 / 0.28);
  --grid-line: rgba(10,12,18,0.04);
}

/* ============================================================ Reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent-soft); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono { font-family: var(--font-mono); }

/* ============================================================ Layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; }
.section-pad { padding-block: clamp(64px, 9vw, 132px); }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* eyebrow / section label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 1px; background: var(--accent-line);
}

.section-head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); }
.section-head h2 { font-size: var(--fs-h2); margin-top: 18px; }
.section-head p { color: var(--text-2); font-size: var(--fs-lead); margin-top: 16px; max-width: 52ch; }

/* ============================================================ Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 30px -10px oklch(0.68 0.17 255 / 0.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -10px oklch(0.68 0.17 255 / 0.65); }
.btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--accent-line); background: var(--surface-2); }
.btn-soft { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); }
.btn-soft:hover { transform: translateY(-2px); }

/* ============================================================ Background grid + texture */
.bg-grid {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 80%);
}
.bg-glow {
  position: fixed; top: -10%; left: 50%; transform: translateX(-50%);
  width: 900px; height: 700px; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0.68 0.17 255 / 0.16), transparent 62%);
  filter: blur(20px);
}
[data-theme="light"] .bg-glow { background: radial-gradient(ellipse at center, oklch(0.55 0.18 258 / 0.10), transparent 62%); }

/* ============================================================ Reveal animation */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.01em;
  padding: 6px 11px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); white-space: nowrap;
}