/* mikrolighting.com — design tokens. Source of truth: design_handoff_mikrolighting/README.md */
:root{
  /* colour */
  --bg:#fbfbfd; --surface:#f5f5f7; --surface-2:#e8e8ed;
  --ink:#1d1d1f; --text-2:#424245; --muted:#6e6e73;
  --line:rgba(0,0,0,.12); --line-strong:rgba(0,0,0,.25);
  --accent:#0071e3; --accent-hover:#0077ed; --link:#0066cc;
  --dark:#000; --dark-text:#f5f5f7; --dark-muted:#a1a1a6; --dark-line:rgba(255,255,255,.14);
  --white:#fff;
  /* type */
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,sans-serif;
  --mono:ui-monospace,Menlo,monospace;
  --fs-display:clamp(42px,6.4cqw,96px);
  --fs-h1:clamp(40px,5.2cqw,76px);
  --fs-h2:clamp(32px,3.6cqw,56px);
  --fs-h2-compact:clamp(26px,2.6cqw,38px);
  --fs-h3:20px; --fs-lead:clamp(17px,1.3cqw,21px); --fs-body:16px; --fs-small:14px; --fs-meta:13px; --fs-eyebrow:12px;
  --lh-tight:1; --lh-heading:1.04; --lh-body:1.65;
  --tr-display:-.03em; --tr-h2:-.025em; --tr-h3:-.01em; --tr-eyebrow:.14em;
  /* layout */
  --gutter:clamp(20px,4.5cqw,64px);
  --section:clamp(56px,7cqw,112px);
  --gap-card:14px; --gap-chip:8px; --gap-input:10px;
  /* radius */
  --r-pill:999px; --r-input:12px; --r-tile:14px; --r-card:18px; --r-panel:24px;
  /* elevation (only these two) */
  --shadow-badge:0 1px 2px rgba(0,0,0,.08);
  --blur-bar:blur(14px);
  /* controls */
  --btn-pad:16px 26px; --btn-pad-sm:12px 20px; --btn-pad-xs:10px 14px; --hit-min:44px;
}
html{font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;color-scheme:light}
body{margin:0}
a{color:var(--ink);text-decoration:none}a:hover{color:var(--link)}
::selection{background:var(--accent);color:#fff}
h1,h2,h3{margin:0;font-weight:600;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.page{container-type:inline-size;overflow-x:clip}

/* Striped placeholder stops — values fixed by README section "Imagery".
   Declared here so no stylesheet needs a raw hex value. */
:root{
  --stripe-light-a:#e8e8ed; --stripe-light-b:#f0f0f3;
  --stripe-dark-a:#1d1d1f;  --stripe-dark-b:#2a2a2d;
}

/* Content cap. The grids are fluid, but past ~1440px a fluid grid just keeps
   adding columns until every tile is a thumbnail and the last row is a hole,
   so beyond that width the page gutter absorbs the extra space instead. */
:root{
  --maxw:1440px;
  --pad-x:max(var(--gutter), calc((100cqw - var(--maxw)) / 2));
}

/* Translucent bar fill and the mid-weight hairline, declared here so no
   stylesheet carries a literal colour. --head-h is the sticky header's
   height: anchors, the filter bar and sticky rails all offset by it. */
:root{
  --bar-bg:rgba(251,251,253,.82);
  --line-mid:rgba(0,0,0,.15);
  --head-h:77px;
}
@media (max-width:1023px){ :root{ --head-h:81px; } }