/* ─────────────────────────────────────────────────────────────
   Saurabh Pati — Design Tokens (single source of truth)

   Single dark theme. Built on The Laptop Shop design system but
   trimmed and re-semanticized for this surface.

   Each token below documents its intended role. Component CSS
   in styles.css references these names ONLY — never raw colors.
   ───────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ── PRIMARY ACCENT ─────────────────────────────────────────
     One accent direction: blue → cyan.
     Everything that "feels brand" lives in these tokens. */
  --accent:           #3B82F6;  /* electric blue — primary CTA, hovers, focus  */
  --accent-2:         #22D3EE;  /* cyan — gradient stop, secondary emphasis    */
  --accent-strong:    #93C5FD;  /* readable accent on dark surfaces (AA)        */
  --accent-soft:      rgba(59, 130, 246, 0.12);   /* tinted backgrounds         */
  --accent-line:      rgba(59, 130, 246, 0.28);   /* outline / 1px borders      */
  --accent-glow:      rgba(59, 130, 246, 0.28);   /* shadow halos               */

  /* ── FUNCTIONAL COLORS ──────────────────────────────────────
     Strictly for state — never decorative.
       success  → "audit complete", "production status"
       warning  → "human-approval gate"
       danger   → "error / detected threat"
       advisory → categorical chip for research / pilot work */
  --success:          #4ADE80;
  --success-soft:     rgba(74, 222, 128, 0.12);
  --warning:          #FBBF24;
  --warning-soft:     rgba(251, 191, 36, 0.12);
  --danger:           #F87171;
  --danger-soft:      rgba(248, 113, 113, 0.12);
  --advisory:         #C084FC;
  --advisory-soft:    rgba(192, 132, 252, 0.10);
  --advisory-line:    rgba(192, 132, 252, 0.30);

  /* ── SURFACES ───────────────────────────────────────────────
     Depth comes from these layered translucent fills, not from
     glows. Glassmorphism is applied at component level. */
  --bg:               #06070D;  /* page background                              */
  --bg-2:             #0A0D17;  /* nested zone (subtle banding)                 */
  --surface:          rgba(255, 255, 255, 0.025);  /* default card fill         */
  --surface-2:        rgba(255, 255, 255, 0.045);  /* hover card fill           */
  --surface-3:        rgba(255, 255, 255, 0.07);   /* active / pressed          */

  /* Lines / borders */
  --line:             rgba(255, 255, 255, 0.08);   /* hairline                  */
  --line-strong:      rgba(255, 255, 255, 0.14);   /* card hover, nav stripe    */

  /* ── TEXT ───────────────────────────────────────────────────
     All four levels are AA on --bg (#06070D). Verified contrast
     ratios in comments. Use --fg-4 only for ≥14px bold or ≥18px. */
  --fg-1:             #F5F7FA;  /* primary text          (~17:1)                */
  --fg-2:             #D7DEE9;  /* secondary             (~13:1)                */
  --fg-3:             #A8B3C2;  /* muted body            (~7.6:1, AA normal)    */
  --fg-4:             #8290A2;  /* labels / captions     (~5.0:1, AA normal)    */
  --fg-on-accent:     #FFFFFF;  /* text on --accent fills                       */

  /* ── FOCUS RING ─────────────────────────────────────────────
     Two-stop ring: inner bg to break the surface, outer accent. */
  --focus-ring:       0 0 0 2px var(--bg), 0 0 0 4px var(--accent-strong);

  /* ── TYPE ───────────────────────────────────────────────────
     Outfit for display (tight tracking 700/800), Inter for body. */
  --font-display:     'Outfit', system-ui, -apple-system, sans-serif;
  --font-body:        'Inter',  system-ui, -apple-system, sans-serif;
  --font-mono:        ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── RADII ──────────────────────────────────────────────────
     Stepped scale. Cards land on --r-lg; CTAs on --r-sm. */
  --r-xs:             6px;
  --r-sm:             10px;
  --r-md:             14px;
  --r-lg:             18px;
  --r-xl:             22px;
  --r-pill:           999px;

  /* ── SPACING (8-pt scale) ───────────────────────────────────
     Section rhythm uses --space-26 vertically. */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-26:         104px;

  /* ── MOTION ─────────────────────────────────────────────────
     Three short tiers. Use --ease for everything; --ease-out
     for elements that recede (like nav scroll-state). */
  --ease:             cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:         cubic-bezier(0.2, 0.7, 0.3, 1);
  --dur-1:            150ms;   /* micro: color, opacity                          */
  --dur-2:            220ms;   /* default: hover lifts, button states            */
  --dur-3:            320ms;   /* reveals on first paint                         */

  /* ── SHADOWS ────────────────────────────────────────────────
     Pure depth — no color. Glow only via --accent-glow halos. */
  --shadow-1:         0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-2:         0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-3:         0 18px 50px rgba(0, 0, 0, 0.50);
}

/* ─────────────────────────────────────────────────────────────
   REDUCED MOTION
   Disables every transition / animation. Reveal handler in main
   script reads the same media query and skips IO altogether.
   ───────────────────────────────────────────────────────────── */
@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;
  }
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL DEFAULTS
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Stats, timestamps, badges — anything numeric — align. */
.num,
.stat,
.case-num,
.foot-bottom,
.mono,
code {
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────
   FOCUS — visible on every interactive element
   ───────────────────────────────────────────────────────────── */
:where(a, button, [role="button"], input, select, textarea, [tabindex="0"]):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Buttons get a soft halo instead of an offset outline. */
.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY CLASSES
   ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, p { color: var(--fg-1); }

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
}

.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 68ch;
  margin: 0 0 var(--space-8);
  text-wrap: pretty;
}

.caption {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-4);
}

.mono, code {
  font-family: var(--font-mono);
  font-size: 13px;
}