/* Smarter Artist tokens, Rev B (Oct 17 2026).
   Source: Sean OS / 05 Library / Smarter Artist - Design System.md
   Two grounds. Orange marks human judgment only. Square corners everywhere. */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/familjen-grotesk-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/martian-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/martian-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Sedgwick Ave"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/sedgwick-ave-latin-400-normal.woff2") format("woff2"); }

:root {
  /* blueprint ground: the brand talking */
  --bp-ink: #0F1A2E;
  --bp-grid: #22324F;
  --bp-grid-major: #1D2C47;
  --bp-fine: #152138;
  --bp-pencil: #7FA7C9;
  --bp-vellum: #EDE8DA;
  --bp-marker: #FF5B14;
  --bp-rule: #3A5078;
  --bp-muted: #C9CFD8;

  /* paper ground: the reader working */
  --pp-paper: #F4F0E4;
  --pp-grid: #EBE6D8;
  --pp-grid-major: #E7E1D1;
  --pp-pencil: #4F6F93;
  --pp-ink: #0F1A2E;
  --pp-marker: #E4470A;      /* shapes, strokes, text 24px and up (3.5:1) */
  --pp-text-orange: #B23605; /* small orange text on paper (5.4:1) */
  --pp-rule: #BDB6A2;
  --pp-rule-soft: #D2CBB7;
  --pp-muted: #3A4A66;
  --pp-pick: #F6D9C8;        /* the reader's choice: a tint, with a check */
  --pp-hatch: #D3CCB8;

  /* spacing: interfaces space on 8; the 32 grid is the drawing's scale */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px; --s8: 64px;
  --grid-fine: 32px;
  --grid-major: 160px;

  /* type */
  --f-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-text: "Familjen Grotesk", system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, monospace;
  --f-hand: "Sedgwick Ave", "Comic Sans MS", cursive;

  --t-body: 18px;
  --t-small: 15px;
  --t-label: 11px;
  --t-h1: clamp(40px, 6.4vw, 96px);
  --t-h2: clamp(30px, 3.6vw, 48px);
  --t-h3: clamp(22px, 2.2vw, 30px);
  --t-hand: clamp(20px, 2vw, 26px);

  --line: 2px;   /* the kit's line weight */
  --hair: 1px;
  --focus: 3px solid var(--pp-pencil);
  --focus-offset: 3px;
}