/* Values read off the Figma frames, not invented here.
   Type sizes and colours come from get_design_context on the marked frames;
   the layout numbers are the frames' own geometry at 1920 wide. */

:root {
  /* ── the app shell, Figma 254:32 / 236:2227 ─────────────────────── */
  --page-w:        1920px;
  --col-index-w:    611px;   /* Column — Index  */
  --col-work-w:    1309px;   /* Column — Work   */
  --header-h:    63.667px;   /* Header — Info, both columns, identical */
  /* Figma draws every rule at 1.333px in a 1920 frame, all the same colour.
     At browser scale that lands on fractional device pixels and some rows come
     out visibly thicker than others — the uneven INDEX lines. A whole pixel is
     identical everywhere, which is what "uniform" actually means on screen. */
  --rule-h:          1px;
  --pad-x:           32px;   /* every column's inner gutter */
  --content-w:     1245px;   /* the Work column's content width */
  --index-w:        547px;   /* 611 - 32 - 32 */

  /* ── type ────────────────────────────────────────────────────────── */
  --f: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --t-identity:      15px;
  --t-nav:           13px;
  --t-contact:       14px;
  --t-bio:           14px;
  --t-index-num:     13px;
  --t-index-title:   15px;
  --t-index-meta:    13px;
  --t-unit-title:    16px;
  --t-grid-title:    12px;
  --t-label:         10px;   /* CATEGORY / ROLE / YEAR / CREDITS */
  --t-value:         13px;
  --t-pp-title:      20px;
  --t-desc:          14px;
  --lh-desc:         1.55;
  --track-label:      1px;
  --track-title:  -0.5px;

  /* ── colour, light ───────────────────────────────────────────────── */
  --ink:        #141414;
  --muted:      #6b6b6b;
  --rule:       #d1d1d1;
  --ground:     #ffffff;
  --empty-cell: #d9d9d9;   /* the GRID's fifteenth cell, as Figma has it */

  /* the opening screen's cursor set, carried into the site */
  --accent:   #c8ff00;
  --accent-2: #ff4d17;
  --accent-3: #00b3ff;
  --accent-4: #ff2fb3;

  /* ── motion ──────────────────────────────────────────────────────── */
  --t-reflow:   560ms;   /* LIST <-> GRID */
  --t-project:  260ms;   /* into / out of a project page */
  --t-swap:     200ms;   /* INDEX <-> Info */
  --t-opening:  900ms;   /* opening -> homepage scroll */
  --t-fold:     220ms;   /* how long the fold leads the scroll by */
  --ease: cubic-bezier(.4, 0, .2, 1);
}

:root[data-theme='dark'] {
  --ink:        #f2f2f2;
  --muted:      #9a9a9a;
  --rule:       #3a3a3a;
  --ground:     #0e0e0e;
  --empty-cell: #262626;
}