/*
  tokens.css: fonts and design tokens. Every other stylesheet reads from here.
  Identity: near-black ground, one salmon accent, Bricolage Grotesque for reading
  and display, Space Mono for labels. Dark only, on purpose: the brand is the black.
  Fonts are self-hosted (src/fonts, SIL Open Font License) so nothing loads from a third party.
*/

@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('../fonts/BricolageGrotesque.woff') format('woff');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Space Mono';
  src: url('../fonts/SpaceMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Simplified Chinese and Arabic for the multilingual template: tiny subsets (Noto Sans SC, IBM Plex Sans Arabic,
   both SIL Open Font License) holding only the characters the site sets. They load only when that text is shown;
   anything else falls back to the system's own Chinese and Arabic fonts. */
@font-face { font-family: 'GQ Han'; src: url('../fonts/NotoSansSC-Light-subset.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'GQ Han'; src: url('../fonts/NotoSansSC-Regular-subset.woff') format('woff'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'GQ Arabic'; src: url('../fonts/IBMPlexSansArabic-Light-subset.woff') format('woff'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'GQ Arabic'; src: url('../fonts/IBMPlexSansArabic-Regular-subset.woff') format('woff'); font-weight: 400 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* color */
  --bg: #141414;
  --bg-deep: #0d0d0d;
  --bg-raise: #1b1b1b;

  --accent: #ea4e65;        /* 5.1:1 on --bg, safe for text */
  --accent-ink: #141414;    /* text on accent fills, 5.1:1 (white would be 3.6:1) */

  --text: #f1efec;
  --text-soft: rgba(241, 239, 236, 0.74);
  --text-faint: rgba(241, 239, 236, 0.56);
  --line: rgba(241, 239, 236, 0.13);
  --line-strong: rgba(241, 239, 236, 0.4);

  /* type */
  --display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --han: 'GQ Han', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', sans-serif;
  --arabic: 'GQ Arabic', 'SF Arabic', 'Geeza Pro', 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;

  /* shape: one radius for every surface and control */
  --radius: 4px;

  /* layout */
  --gutter: clamp(20px, 4.2vw, 64px);
  --max: 1360px;
  --nav-height: 64px;

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* aliases so the per-page styles inside the case studies keep working */
  --serif: var(--display);
  --shade: var(--bg);
  --shade-deep: var(--bg-deep);
  --gutter-sm: var(--gutter);
}