/* Snapshot of the design-system tokens so this folder works standalone when hosted.
   ../../styles.css (linked after this) still wins inside the design-system project. */
/* ============================================================
   Micah Hamilton — Design System
   Global entry point. Consumers link THIS file only.
   Import order: colors → typography → spacing.
   ============================================================ */
/* tokens/colors.css */
/* ============================================================
   COLORS — monochrome, light by default, dark via body.dark
   Base palette uses the original short names (--bg, --fg, …)
   so canvases stay in sync; semantic aliases sit on top.
   ============================================================ */
:root{
  /* ---- base palette (LIGHT) ---- */
  --bg:#ffffff;      /* page background — pure white */
  --fg:#111110;      /* ink — near-black */
  --dim:#767676;     /* secondary text / labels */
  --faint:#c9c9c9;   /* tertiary text / quiet borders */
  --line:#e6e6e6;    /* hairline dividers */
  --panel:#ffffff;   /* raised surface (sounds panel) */
  --hover:#f2f2f2;   /* hover wash */

  /* ---- semantic aliases ---- */
  --surface-page:var(--bg);
  --surface-card:var(--panel);
  --surface-hover:var(--hover);
  --text-strong:var(--fg);
  --text-muted:var(--dim);
  --text-faint:var(--faint);
  --border-hairline:var(--line);
  --border-strong:var(--faint);
}

/* ---- DARK ---- */
body.dark{
  --bg:#0a0a0a;
  --fg:#e9e8e4;
  --dim:#7c7a76;
  --faint:#3a3936;
  --line:#201f1d;
  --panel:#121211;
  --hover:#1a1a18;
}

/* tokens/typography.css */
/* ============================================================
   TYPOGRAPHY — Swiss / International Typographic Style.
   One family (Helvetica Neue → Arial). Big, tightly-tracked
   headings; small uppercase letter-spaced labels.
   ============================================================ */
:root{
  /* ---- families ---- */
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif; /* @kind font */
  --display:var(--sans);
  --body:var(--sans);
  --mono:var(--sans);
  /* monospace stack reserved for the ASCII hero only */
  --asciifont:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace; /* @kind font */

  --font-sans:var(--sans);
  --font-ascii:var(--asciifont);

  /* ---- fluid type scale ---- */
  --text-display:clamp(2.4rem,7vw,5rem);   /* page titles: Work / Archive / Info */
  --text-hero:clamp(1.5rem,3.4vw,2.6rem);  /* hero tagline */
  --text-contact:clamp(1.6rem,5vw,3rem);   /* contact link */
  --text-bio:clamp(1.3rem,3vw,2rem);       /* lede / bio paragraphs */
  --text-archive:clamp(1rem,2.4vw,1.5rem); /* archive row titles */
  --text-card-title:.95rem;                /* project card title */
  --text-body:15px;                        /* base body */
  --text-label:.7rem;                      /* uppercase mono label */
  --text-micro:.62rem;                     /* smallest caps label */

  /* ---- weights ---- */
  --fw-medium:500; /* @kind other */
  --fw-semi:600;   /* @kind other */
  --fw-bold:700;   /* @kind other */

  /* ---- letter-spacing ---- */
  --ls-display:-.03em;   /* large headings, tightly tracked */
  --ls-hero:-.025em;
  --ls-tight:-.01em;
  --ls-label:.09em;      /* uppercase labels, opened up */
  --ls-pill:.02em;

  /* ---- line-height ---- */
  --lh-body:1.45;  /* @kind other */
  --lh-snug:1.28;  /* @kind other */
  --lh-tight:.9;   /* @kind other */
  --lh-flush:1.0;  /* @kind other */
}

/* tokens/spacing.css */
/* ============================================================
   SPACING & LAYOUT
   Generous fluid page padding; tight modular gaps.
   Almost no corner radius — pills and circles are the only
   rounded forms (Swiss rigor).
   ============================================================ */
:root{
  /* ---- page gutter ---- */
  --pad:clamp(.5rem,2vw,1.5rem);

  /* ---- modular gaps ---- */
  --gap-grid:clamp(.6rem,1.4vw,1.4rem);  /* work grid */
  --gap-sm:.5rem;
  --gap-md:1.2rem;
  --gap-lg:2.4rem;
  --gap-xl:clamp(2rem,6vw,6rem);         /* info two-column split */

  /* ---- fixed chrome heights ---- */
  --nav-h:52px;
  --foot-h:50px;

  /* ---- radii (Swiss = mostly square) ---- */
  --radius-0:0;          /* cards, panels, images: hard corners */
  --radius-pill:40px;    /* filter pills */
  --radius-round:50%;    /* theme toggle, vinyl, play buttons */

  /* ---- containers ---- */
  --maxw:1400px;
  --maxw-panel:min(880px,94vw); /* @kind spacing */

  /* ---- shadow (used sparingly — panel + vinyl only) ---- */
  --shadow-panel:0 30px 80px rgba(0,0,0,.25);
  --shadow-vinyl:0 6px 20px rgba(0,0,0,.35),inset 0 0 0 1px #000;
}