/* Fonts: SIL Open Font License 1.1, see ../ASSETS.md */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz-italic.woff2") format("woff2-variations");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-opsz.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* Primitive */
  --c-paper-0: #fffdf8;
  --c-paper-50: #f7f4ec;
  --c-paper-100: #eee9dc;
  --c-paper-200: #ddd6c4;
  --c-paper-300: #c9bfa8;
  --c-ink-900: #17171b;
  --c-ink-600: #45454d;
  --c-ink-400: #66666e;
  --c-ember-700: #9c3209;
  --c-ember-600: #b93c0b;
  --c-ember-300: #e9a17d;
  --c-ember-100: #f8dfd1;
  --c-cobalt-700: #1b3a9c;
  --c-cobalt-600: #1f48c4;
  --c-cobalt-300: #9fb3ee;
  --c-cobalt-100: #dde5fb;
  --c-slate-600: #4f5e7d;
  --c-slate-200: #cfd6e3;
  --c-slate-100: #e8ecf3;
  --c-moss-700: #2f6b2a;

  --f-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px; --space-9: 112px;
  --radius-1: 4px; --radius-2: 10px; --radius-3: 16px; --radius-pill: 999px;

  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 600ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  /* Semantic */
  --bg: var(--c-paper-50);
  --surface: var(--c-paper-0);
  --surface-sunk: var(--c-paper-100);
  --line: var(--c-paper-200);
  --line-strong: var(--c-paper-300);
  --text: var(--c-ink-900);
  --text-muted: var(--c-ink-600);
  --text-faint: var(--c-ink-400);
  --you: var(--c-ember-600);
  --you-strong: var(--c-ember-700);
  --you-mid: var(--c-ember-300);
  --you-soft: var(--c-ember-100);
  --model: var(--c-cobalt-600);
  --model-strong: var(--c-cobalt-700);
  --model-mid: var(--c-cobalt-300);
  --model-soft: var(--c-cobalt-100);
  --cached: var(--c-slate-600);
  --cached-mid: var(--c-slate-200);
  --cached-soft: var(--c-slate-100);
  --app: var(--c-ink-600);
  --app-soft: var(--c-paper-100);
  --ok: var(--c-moss-700);
  --focus: var(--c-cobalt-600);

  --type-hero: clamp(2.6rem, 1.4rem + 4.2vw, 5.6rem);
  --type-title: clamp(2rem, 1.2rem + 2.4vw, 3.6rem);
  --type-lead: clamp(1.15rem, 1rem + .55vw, 1.55rem);
  --type-body: clamp(1rem, .95rem + .25vw, 1.2rem);
  --type-small: .875rem;
  --type-label: .75rem;

  /* Component */
  --topbar-h: 56px;
  --bar-h: 52px;
  /* Caption band: lower third of the stage, one short line per step, sized for the back of a room. */
  --band-h: clamp(96px, 20svh, 210px);
  --type-caption: clamp(1.2rem, .5rem + 2vw, 2.6rem);
  --type-caption-sub: clamp(1rem, .6rem + 1vw, 1.6rem);
  --type-cap-title: clamp(2rem, .8rem + 3.6vw, 4.6rem);
  --card-bg: color-mix(in srgb, var(--surface) 94%, transparent);
  --card-shadow: 0 1px 0 rgba(23,23,27,.04), 0 24px 48px -28px rgba(23,23,27,.35);
  --control-h: 44px;
  /* Scene type: scales with the stage, never below what a projected room can read. */
  --scene-meta: clamp(14px, 1.25cqw, 18px);
  --scene-label: clamp(16px, 1.55cqw, 22px);
  --scene-body: clamp(17px, 1.75cqw, 26px);
  --scene-figure: clamp(26px, 3cqw, 44px);
}