/* ============================================================
   Anuj Shah — Design Tokens
   Minimalist personal portfolio. Black canvas, off-white type,
   single typeface (Jost) across the entire system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* ---------- Color: surfaces ---------- */
  --bg:         #0A0A0A;   /* page canvas — almost-pure black, a hair warmer than #000 */
  --bg-raised: #131313;   /* cards, hover plates */
  --bg-sunken: #050505;   /* footers, deep wells */
  --line:       #1F1F1F;   /* hairline dividers on dark */
  --line-2:     #2A2A2A;   /* slightly stronger divider */

  /* ---------- Color: foreground (on dark) ---------- */
  --fg-1:       #F2EFE8;   /* primary off-white — warm, never harsh */
  --fg-2:       #B8B5AE;   /* secondary copy / metadata */
  --fg-3:       #6E6B66;   /* tertiary / captions / disabled */
  --fg-4:       #3A3835;   /* very low emphasis — placeholders */

  /* ---------- Color: inverse (on light) ---------- */
  --inv-bg:     #F2EFE8;   /* light canvas variant */
  --inv-fg-1:   #0A0A0A;
  --inv-fg-2:   #4A4845;
  --inv-fg-3:   #8A8782;

  /* ---------- Color: accent ---------- */
  --accent:     #F2EFE8;   /* same as fg-1 — the "accent" is just light itself */
  --accent-dim: #B8B5AE;

  /* ---------- Type: family ---------- */
  --font:        'Jost', system-ui, -apple-system, sans-serif;

  /* ---------- Type: weight ---------- */
  --w-thin:      100;
  --w-extralight:200;
  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;

  /* ---------- Type: scale (rem-friendly px) ---------- */
  --t-display:   clamp(64px, 9vw, 144px);
  --t-h1:        clamp(48px, 6vw, 88px);
  --t-h2:        clamp(36px, 4.4vw, 56px);
  --t-h3:        28px;
  --t-h4:        20px;
  --t-body:      17px;
  --t-body-sm:   15px;
  --t-caption:   13px;
  --t-micro:     11px;

  /* ---------- Type: line-height ---------- */
  --lh-tight:    0.95;
  --lh-snug:     1.15;
  --lh-normal:   1.45;
  --lh-loose:    1.7;

  /* ---------- Type: tracking ---------- */
  --tr-display: -0.02em;   /* slight tight on big display */
  --tr-normal:   0em;
  --tr-wide:     0.08em;
  --tr-wider:    0.18em;   /* uppercase eyebrows, nav links */
  --tr-widest:   0.32em;   /* like the logo wordmark */

  /* ---------- Spacing (8pt grid) ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---------- Radii ---------- */
  --r-0:  0px;     /* default — system is square */
  --r-1:  2px;
  --r-2:  4px;
  --r-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair:  0.5px solid var(--line);
  --border-thin:  1px solid var(--line);
  --border-med:   1px solid var(--line-2);

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:    160ms;
  --dur:         240ms;
  --dur-slow:    480ms;

  /* ---------- Z ---------- */
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
}

/* ---------- Base ---------- */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic type ---------- */
.t-display {
  font-family: var(--font);
  font-weight: var(--w-thin);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-h1 {
  font-family: var(--font);
  font-weight: var(--w-extralight);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-h2 {
  font-family: var(--font);
  font-weight: var(--w-light);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
}
.t-h3 {
  font-family: var(--font);
  font-weight: var(--w-regular);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
}
.t-h4 {
  font-family: var(--font);
  font-weight: var(--w-medium);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
}
.t-body {
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-body-sm {
  font-weight: var(--w-light);
  font-size: var(--t-body-sm);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.t-caption {
  font-weight: var(--w-regular);
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-eyebrow {
  font-weight: var(--w-regular);
  font-size: var(--t-micro);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-wordmark {
  font-weight: var(--w-light);
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
}
.t-mono-feel {
  /* For numeric / index labels — keep one family but use tabular */
  font-weight: var(--w-regular);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-wide);
}