/* ============================================================
   tokens.css  ·  Layer 2 design system (locked)
   Portfolio: Nikhil Sharma
   Concept: "signal from noise"
   This file owns ALL design decisions. Redesigns edit here.
   Content lives separately in content.json (Layer 1).
   ============================================================ */

/* Fonts: Google Fonts for quick start.
   For production on GitHub Pages, self-host these in /fonts and
   replace this @import with @font-face for speed and reliability. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Hanken+Grotesk:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Color ---- */
  --ink:    #14181F;  /* dark intelligence panels */
  --paper:  #F1F2F0;  /* light reading sections */
  --cobalt: #2742D9;  /* signature accent: links, key data, active states */
  --cobalt-light: #6E8BFF;  /* cobalt for dark (ink) backgrounds: eyebrows, resolved hero signal */
  --amber:  #E8A33D;  /* rare "live signal" highlight, ~3 uses per page */
  --mist:   #9AA3AE;  /* noise, inactive nodes, the "before" of a reveal */
  --line:   #D4D7DA;  /* hairlines, borders */

  /* Text roles */
  --text-on-paper:  #14181F;
  --text-on-ink:    #F1F2F0;
  --text-muted:     #5A6470;
  --text-on-amber:  #412402;

  /* ---- Typography ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (responsive via clamp). 64 / 40 / 28 / 20 / 16 / 13 */
  --fs-display: clamp(2.5rem, 6vw, 4rem);     /* 64 */
  --fs-h2:      clamp(1.75rem, 4vw, 2.5rem);  /* 40 */
  --fs-h3:      1.75rem;                        /* 28 */
  --fs-lead:    1.25rem;                        /* 20 */
  --fs-body:    1rem;                           /* 16 */
  --fs-mono:    0.8125rem;                      /* 13 */

  --weight-display: 800;
  --weight-subhead: 600;
  --weight-body:    400;
  --weight-strong:  500;

  --tracking-display: -0.02em;
  --tracking-mono:    0.1em;   /* uppercase mono labels */
  --leading-body:     1.6;
  --leading-display:  1.02;

  /* ---- Layout ---- */
  --maxw: 1120px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 4px;        /* controls */
  --radius-card: 12px;  /* cards */
  --rail-w: 2px;        /* the side "signal rail" */

  /* ---- Motion ---- */
  --ease-signal: cubic-bezier(0.16, 1, 0.3, 1); /* confident ease-out */
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 800ms;
}

/* ============================================================
   Base
   ============================================================ */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text-on-paper);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

/* Section rhythm: alternate ink panels and paper sections */
.section--ink {
  background: var(--ink);
  color: var(--text-on-ink);
}
.section--paper {
  background: var(--paper);
  color: var(--text-on-paper);
}

/* Display + headings */
.display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--fs-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}
.subhead {
  font-family: var(--font-display);
  font-weight: var(--weight-subhead);
  font-size: var(--fs-h3);
  letter-spacing: -0.01em;
}

/* Mono utility / eyebrows / data labels */
.eyebrow,
.data-label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.eyebrow { color: var(--cobalt); }

a { color: var(--cobalt); text-underline-offset: 3px; }

/* ============================================================
   Motion primitive: noise -> signal reveal
   Apply .reveal to elements; JS (IntersectionObserver) adds .is-in
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  color: var(--mist);
  transition:
    opacity var(--dur-base) var(--ease-signal),
    transform var(--dur-base) var(--ease-signal),
    filter var(--dur-base) var(--ease-signal),
    color var(--dur-base) var(--ease-signal);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  filter: blur(0);
  color: inherit;
}

/* Rare "signal lighting up" pulse, e.g., a resolved node */
.pulse { animation: pulse var(--dur-slow) var(--ease-signal); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--amber); }
  100% { box-shadow: 0 0 0 14px rgba(232,163,61,0); }
}

/* ============================================================
   Quality floor: respect reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    color: inherit;
    transition: none;
  }
  .pulse { animation: none; }
}

/* Visible keyboard focus */
:focus-visible {
  outline: 2px solid var(--cobalt);
  outline-offset: 2px;
}