/* tokens.css — Gallery Cobalt design system (2026-08-03 redesign).
   The ONE token sheet both pages import (served at /assets/tokens.css).
   Page CSS may only consume these tokens — no other color literals. */

:root{
  color-scheme: light;

  /* palette — Gallery Cobalt (light) */
  --paper:#FAFAF7;
  --paper-2:#EFEFEA;
  --paper-3:#E7E7E0;
  --ink:#16181D;
  --muted:#5c6066;
  --accent:#2B4BD7;
  --accent-strong:#1c33a8;   /* accent hover */
  --accent-ink:#FAFAF7;      /* text on accent */
  --hairline:rgba(22,24,29,.14);
  --tint-1:#E6EBFB;          /* light cobalt tint (video-tile ground) */
  --tint-2:#DCE3F9;          /* deeper cobalt tint (branded-work ground) */

  /* spacing scale */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  --s7:48px;
  --s8:64px;

  /* type scale (integer px caps: 12 / 14 / 16 / 18 / 24 / 32 / 48 / 72) */
  --t-12:12px;
  --t-14:14px;
  --t-16:16px;
  --t-18:18px;
  --t-24:clamp(20px, 1.8vw + 14px, 24px);
  --t-32:clamp(26px, 2.6vw + 16px, 32px);
  --t-48:clamp(32px, 4.5vw + 16px, 48px);
  --t-72:clamp(44px, 7vw + 18px, 72px);

  /* radii (2 values max) */
  --r-tile:12px;
  --r-chip:99px;

  /* font stacks */
  --font-display:'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body:'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* focus — visible ring on every interactive element, both pages */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

/* ---- shared recipes ---- */

/* hairline divider (works on <hr> and block elements) */
.hairline{
  border:0;
  border-top:1px solid var(--hairline);
}

/* the one badge/CTA chip recipe — mono 12px pill on accent */
.chip{
  display:inline-flex;
  align-items:center;
  font:600 var(--t-12)/1 var(--font-mono);
  background:var(--accent);
  color:var(--accent-ink);
  border-radius:var(--r-chip);
  padding:7px 13px;
  white-space:nowrap;
}
@media (hover:hover){
  .chip:hover{background:var(--accent-strong)}
}

/* 40x40 bordered platform-logo chip */
.social-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1.5px solid var(--hairline);
  border-color:color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius:var(--r-tile);
  color:var(--ink);
  background:var(--paper);
}
.social-chip svg{width:19px;height:19px}

/* tile/row frame — 1px hairline border, 12px radius */
.tile-frame{
  border:1px solid var(--hairline);
  border-radius:var(--r-tile);
  overflow:hidden;
}