/* Design tokens for briannecrawford.com: the only file that states a color,
 * a font family, a type size, a weight, a line height, a letter spacing, a
 * space, a corner or a duration. css/site.css and every page read these
 * variables; bin/check.sh (g) fails a hex color anywhere else and (o) a raw
 * value for the rest. docs/design-system.md says which token moves what.
 *
 * The palette is a drawing set: gallery white and soft linen paper, warm
 * charcoal ink, a champagne-bronze accent (--patina) used sparingly for
 * labels, rules and the one highlighted word. Dark mode follows the system
 * preference and keeps the same relationships. */
:root {
  --bg: #FCFBF8;          /* gallery white */
  --raised: #F5F2EC;      /* soft linen */
  --ink: #2A2826;         /* warm charcoal */
  --ink-soft: #6E6861;    /* secondary text, 4.5:1 on every panel */
  --line: #5E5952;        /* drawing line in illustrations */
  --rule: #E7E2DA;        /* hairline rules and borders */
  --patina: #A88F6E;      /* champagne bronze accent: rules, strokes, fills */
  --patina-ink: #7A6548;  /* the accent as text or a focus ring, 4.5:1 on every panel */
  --field-edge: #8A8279;  /* form field borders, 3:1 on the page */
  --brass: #B9A383;       /* dimension lines in illustrations */
  --on-patina: #FFFFFF;   /* text on a patina fill */
  --accent-wash: #EFE8DD; /* tinted panel */
  --error: #9A4A3A;       /* form errors, the one red */

  --display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --mono: "Jost", "Helvetica Neue", Arial, sans-serif; /* small caps labels; same face, tracked wide */

  /* Type sizes. Labels and buttons, body, then headings by role, then the
   * fluid display sizes. Labels in drawings are SVG user units. */
  --s-2xs: 0.68rem;       /* small caps labels: captions, field labels, numbers */
  --s-xs: 0.75rem;        /* buttons, navigation, hints */
  --s-sm: 1rem;
  --s-md: 1.0625rem;      /* body */
  --s-lg: 1.3125rem;      /* lede, short display lines */
  --s-h4: 1.2rem;         /* list terms, table heads */
  --s-h3: 1.5rem;         /* card and section titles */
  --s-h3-lg: 1.75rem;     /* offer titles */
  --s-h2-sm: 2rem;        /* the numbers block title */
  --s-stat: 2.6rem;       /* a figure in the about facts */
  --s-stat-lg: clamp(2.4rem, 1.6rem + 2.5vw, 3.4rem); /* a figure in the numbers block */
  --s-aside: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); /* italic asides and lead-ins */
  --s-quote: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);     /* the principle line */
  --s-xl: clamp(2rem, 1.4rem + 2.2vw, 3rem);          /* section headings */
  --s-page-title: clamp(2.6rem, 1.5rem + 3.8vw, 4.6rem); /* secondary page H1 */
  --s-xxl: clamp(3rem, 1.6rem + 5.4vw, 5.75rem);      /* hero and closing headlines */
  --s-svg: 9px;           /* labels inside drawings */
  --s-svg-sm: 7.5px;

  /* Weights. Both faces are variable fonts, so any of these renders exactly. */
  --w-light: 300;
  --w-book: 350;          /* body */
  --w-regular: 400;
  --w-medium: 500;

  /* Line height. */
  --lh-none: 1;
  --lh-display: 1.04;     /* hero and page titles */
  --lh-heading: 1.08;     /* every other heading */
  --lh-snug: 1.2;
  --lh-quote: 1.3;
  --lh-compact: 1.5;      /* card text */
  --lh-relaxed: 1.6;
  --lh-body: 1.7;

  /* Letter spacing. Small caps labels are tracked wide; display type a hair tight. */
  --track-tight: -0.005em;
  --track-snug: 0.02em;
  --track-open: 0.08em;
  --track-caps-sm: 0.14em; /* footer and drawing labels */
  --track-caps: 0.2em;     /* navigation, small buttons */
  --track-label: 0.22em;   /* buttons, captions, field labels */
  --track-label-wide: 0.24em; /* eyebrow labels and numbers */

  /* Space: a 0.25rem step. --sp-4 is 1rem, --sp-8 is 2rem. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 1.75rem;
  --sp-8: 2rem;
  --sp-9: 2.25rem;
  --sp-10: 2.5rem;
  --sp-11: 2.75rem;
  --sp-12: 3rem;
  --sp-14: 3.5rem;

  /* Fluid space by role: the padding of a band and the gap of a grid. */
  --space-section: clamp(4.5rem, 10vw, 8rem);      /* a section's top and bottom */
  --space-section-follow: clamp(1.5rem, 4vw, 3rem); /* a section that follows a plain section */
  --space-band: clamp(4rem, 9vw, 7rem);            /* the home page contact band */
  --space-band-sm: clamp(3.5rem, 8vw, 6rem);       /* the closing band, a sub-section */
  --space-hero-top: clamp(3rem, 8vw, 6.5rem);
  --space-hero-bottom: clamp(3rem, 6vw, 5rem);
  --space-head-top: clamp(3rem, 7vw, 5.5rem);      /* secondary page header */
  --space-head-bottom: clamp(2.5rem, 5vw, 4rem);
  --space-heading: clamp(2.5rem, 5vw, 3.5rem);     /* above an H2 in an article */
  --gap-columns: clamp(2rem, 6vw, 5rem);           /* two-column layouts */
  --gap-grid: clamp(1rem, 2.5vw, 2rem);            /* card grids, navigation */
  --gap-grid-lg: clamp(1.25rem, 3vw, 2.5rem);
  --gap-panel: clamp(1.5rem, 4vw, 3.5rem);         /* inside the numbers panel */
  --pad-panel: clamp(1.5rem, 4vw, 2.5rem);         /* inside a tinted panel or card */

  /* Corners. The site is square; these are the two exceptions. */
  --radius-sm: 2px;       /* the focus ring */
  --radius-round: 50%;    /* the portrait and the diagram's nodes */

  /* Layout. Breakpoints cannot be variables inside @media, so the two the
   * site uses are stated here and bin/check.sh (o) allows only these:
   * 900px (two columns become one) and 600px (phone). */
  --wrap: 74rem;
  --gutter: clamp(16px, 4vw, 40px);

  /* Motion. */
  --dur-fast: 0.2s;
  --dur: 0.25s;
  --ease-curve: ease;
  --ease: var(--dur) var(--ease-curve);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1918; --raised: #222120; --ink: #F1EDE6; --ink-soft: #ADA69C; --line: #C9C2B7;
    --rule: #34322F; --patina: #CDB490; --patina-ink: #CDB490; --field-edge: #75706A; --brass: #B9A383; --on-patina: #1A1918; --accent-wash: #2B2824;
    --error: #D98A78;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1918; --raised: #222120; --ink: #F1EDE6; --ink-soft: #ADA69C; --line: #C9C2B7;
  --rule: #34322F; --patina: #CDB490; --patina-ink: #CDB490; --field-edge: #75706A; --brass: #B9A383; --on-patina: #1A1918; --accent-wash: #2B2824;
  --error: #D98A78;
  color-scheme: dark;
}

/* Self-hosted fonts, latin subsets only. Each file is a variable font that
 * covers every weight the site uses, so one file serves a family and style.
 * Files are never edited in place, so _headers can cache them for good. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("/fonts/cormorant-garamond-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/jost.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }