/* Braventon Innovation LLC - design tokens ("Site Sheet"). The only file that contains raw colour values. See docs/brand.md. */
@layer reset, base, layout, components, pages;

@font-face {
  font-family: "Big Shoulders Display";
  src: url("../fonts/big-shoulders-display-700-900.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-400-700.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --color-bone: #F4F1EA;
  --color-paper: #FFFFFF;
  --color-concrete: #E4DFD3;
  --color-line: #CFC8B8;
  --color-ink: #171A1D;
  --color-steel: #454D54;
  --color-cone: #C2410C;
  --color-cone-deep: #9A3412;
  --color-cone-soft: #FBE2D2;
  --color-cone-bright: #FF8A4C;
  --color-rebar: #1F252A;
  --color-rebar-2: #2A3238;
  --color-on-rebar: #EEEAE0;
  --color-on-rebar-muted: #B3B9BD;
  --color-tape: #F2B705;
  --color-error: #B42318;
  --color-ok: #1E6B3A;

  /* derived tones */
  --scrim: rgb(23 26 29 / .62);
  --line-rebar: rgb(238 234 224 / .18);
  --grid-line: rgb(23 26 29 / .055);
  --tape: repeating-linear-gradient(-45deg, var(--color-tape) 0 14px, var(--color-ink) 14px 28px);

  /* type */
  --font-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --font-text: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs--1: .8125rem;
  --fs-0: 1rem;
  --fs-1: 1.125rem;
  --fs-2: 1.4rem;
  --fs-3: 1.75rem;
  --fs-4: clamp(2.2rem, 4vw, 3rem);
  --fs-5: clamp(3.1rem, 8.4vw, 6.25rem);

  /* geometry */
  --r: 2px;
  --bw: 2px;
  --cut: 18px;
  --shadow-hard: 5px 5px 0 var(--color-ink);
  --shadow-hard-sm: 3px 3px 0 var(--color-ink);
  --frame: min(1240px, 100% - 2.5rem);
  --gap: clamp(1rem, 2vw, 1.5rem);
  --section: clamp(3.5rem, 8vw, 6.5rem);
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}