/**
 * Tarkowska Portfolio — Design Tokens
 * Linked by every page (index.html, portfolio.html, case-study-*.html).
 * Fonts: Inter (400/500/600/700) + Instrument Serif (italic)
 */

/* ─── Google Fonts import ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

/* ─── Base tokens ─────────────────────────────────────────── */
:root {

  /* Colors */
  --color-bg:        #ffffff;
  --color-ink:       rgb(57, 57, 57);      /* primary text */
  --color-muted:     rgb(115,111,111)    /* secondary text — WCAG AA 4.96:1 on white */;   /* secondary text */
  --color-muted-2:   rgb(207, 207, 207);   /* placeholder / disabled */
  --color-line:      rgb(230, 230, 230);   /* borders / dividers */
  --color-chip:      rgb(239, 239, 239);   /* tag backgrounds */
  --color-surface:   rgb(248, 247, 247);   /* subtle card bg */
  --color-surface-2: rgb(249, 249, 249);   /* hover on surface */
  --color-accent:    rgb(255,88,34);       /* orange — CTAs, active — decorative */
  --color-accent-text: rgb(255,88,34);     /* orange — CTAs, active */

  /* Semantic aliases */
  --bg:       var(--color-bg);
  --ink:      var(--color-ink);
  --muted:    var(--color-muted);
  --muted-2:  var(--color-muted-2);
  --line:     var(--color-line);
  --chip:     var(--color-chip);
  --surface:  var(--color-surface);
  --surface-2:var(--color-surface-2);
  --accent:   var(--color-accent);
  --accent-text: var(--color-accent-text);

  /* Typography — families */
  --font-sans:  'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  ui-monospace, Menlo, 'Courier New', monospace;

  /* Typography — scale */
  --text-hero:      clamp(44px, 6.4vw, 80px);   /* hero h1 */
  --text-display:   clamp(36px, 4.8vw, 64px);   /* about h1 */
  --text-h2:        clamp(28px, 3.4vw, 40px);   /* section heads */
  --text-h3:        clamp(24px, 2.4vw, 34px);   /* narrative heads */
  --text-project-h1:clamp(40px, 5.2vw, 72px);  /* project page */
  --text-body-lg:   17px;                       /* lede / primary body */
  --text-body:      16px;                       /* standard body */
  --text-body-sm:   15px;                       /* secondary body */
  --text-ui:        14px;                       /* buttons, nav */
  --text-ui-sm:     13.5px;                     /* small UI */
  --text-label:     11px;                       /* eyebrow / sec-label */
  --text-tag:       10px;                       /* chips */
  --text-meta:      10px;                       /* year, tabular */
  --text-mono:      10px;                       /* placeholder labels */

  /* Typography — tracking */
  --tracking-hero:  -0.03em;
  --tracking-h2:    -0.02em;
  --tracking-h3:    -0.015em;
  --tracking-label: 0.16em;
  --tracking-tag:   0.12em;
  --tracking-meta:  0.04em;
  --tracking-mono:  0.1em;

  /* Typography — line-height */
  --leading-hero:   1.02;
  --leading-tight:  1.1;
  --leading-snug:   1.2;
  --leading-normal: 1.6;
  --leading-relaxed:1.7;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   40px;
  --space-2xl:  60px;
  --space-3xl:  80px;
  --space-4xl:  100px;
  --space-5xl:  140px;

  /* Border radius */
  --radius-sm:   8px;
  --radius-md:   14px;   /* avatar, cards, menu button */
  --radius-lg:   16px;   /* thumbnails */
  --radius-xl:   20px;   /* project covers, about sections */
  --radius-pill: 999px;  /* buttons, tags, crumb */
  --radius-tag:  100px;  /* chip tags */

  /* Shadows */
  --shadow-card-hover: 0 30px 60px -30px rgba(57, 57, 57, .28);
  --shadow-avatar:     0 1px 0 rgba(0, 0, 0, .04);
  --shadow-accent-dot: 0 0 0 3px rgba(255, 88, 34, .18);

  /* Layout */
  --max-width:     1200px;
  --wrap-x:        40px;
  --wrap-x-mobile: 22px;
  --header-pb:     54px;
  --section-gap:   140px;
  --card-gap:      22px;

  /* Motion */
  --ease-settle:      cubic-bezier(.2, .7, .2, 1);
  --duration-fast:    0.2s;
  --duration-base:    0.35s;
  --duration-slow:    0.5s;
  --duration-reveal:  0.9s;
  --duration-float:   6s;
}

/* ─── Base resets ─────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
img { max-width: 100%; display: block; }

/* ─── Type utilities ──────────────────────────────────────── */
.t-hero     { font-size: var(--text-hero);     letter-spacing: var(--tracking-hero);  line-height: var(--leading-hero);  font-weight: 600; }
.t-display  { font-size: var(--text-display);  letter-spacing: var(--tracking-h2);   line-height: var(--leading-tight); font-weight: 600; }
.t-h2       { font-size: var(--text-h2);       letter-spacing: var(--tracking-h2);   line-height: var(--leading-snug);  font-weight: 600; }
.t-h3       { font-size: var(--text-h3);       letter-spacing: var(--tracking-h3);   line-height: var(--leading-snug);  font-weight: 600; }
.t-serif    { font-family: var(--font-serif); font-style: italic; font-weight: 400; }
.t-lede     { font-size: var(--text-body-lg);  line-height: var(--leading-normal);    color: var(--muted); }
.t-body     { font-size: var(--text-body);     line-height: var(--leading-normal); }
.t-label    { font-size: var(--text-label);    letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); font-weight: 400; }
.t-tag      { font-size: var(--text-tag);      letter-spacing: var(--tracking-tag);   text-transform: uppercase; font-weight: 400; }
.t-meta     { font-size: var(--text-meta);     letter-spacing: var(--tracking-meta);  font-weight: 500; font-variant-numeric: tabular-nums; }
.t-mono     { font-family: var(--font-mono);   font-size: var(--text-mono);           letter-spacing: var(--tracking-mono); }
.t-accent   { color: var(--accent); }
.t-muted    { color: var(--muted); }
.t-ink      { color: var(--ink); }
.text-balance { text-wrap: balance; }
.text-pretty  { text-wrap: pretty; }

/* ─── Layout / reveal / float ─────────────────────────────────
   Deliberately NOT defined here: .wrap, .reveal, and .float differ
   between the home/portfolio pages and the case-study pages (widths,
   timing, easing), so each page keeps its own local rule for these
   rather than sharing one that would be wrong for half the site. */