/* ASTRAGAL design tokens
   Ground:   wet slate / quarried limestone
   Accent:   verdigris, the green bronze oxidizes to on monuments
   Ornament: bead and reel, the carving an astragal traditionally carries

   Light is the default and is what the site opens to. Dark is reachable from
   the toggle in the top bar and is remembered per visitor, so the OS setting
   is deliberately not consulted on first load. */

:root {
  color-scheme: light;

  --bg:          #E4E1D9;
  --bg-raised:   #EDEAE2;
  --bg-sunk:     #D8D4CA;
  --ink:         #14181B;
  --ink-2:       #474E54;
  --ink-3:       #6E767C;
  --rule:        #C6C1B5;
  --rule-soft:   #D3CFC4;
  --accent:      #23695A;
  --accent-lift: #2F8C77;
  --ochre:       #9A6725;
  --grain-op:    .30;

  --font-display: "Palatino Linotype", "Book Antiqua", Palatino, "Hoefler Text", "Iowan Old Style", Constantia, Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale. Deliberately smaller than the first cut, which set the hero at
     6.25rem and pushed everything else up behind it. At that size the page read
     as a poster: three words filled a screen, the body copy inherited the same
     ambition, and the result was loud rather than confident. Drawing offices
     set small and tight, which is the reference the rest of the design uses. */
  --t-hero: clamp(2rem, 4.4vw, 3.5rem);
  --t-h2:   clamp(1.4rem, 2.5vw, 2rem);
  --t-h3:   clamp(1.02rem, 1.3vw, 1.18rem);
  --t-lead: clamp(1rem, 1.05vw, 1.0625rem);
  --t-body: clamp(.9375rem, .95vw, 1rem);
  --t-sm:   .8125rem;
  --t-mono: .6875rem;

  --rail-w: 88px;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --measure: 34rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #101417;
  --bg-raised:   #171C20;
  --bg-sunk:     #0B0E10;
  --ink:         #E4E1D9;
  --ink-2:       #A5ACB2;
  --ink-3:       #737B81;
  --rule:        #262D32;
  --rule-soft:   #1E2429;
  --accent:      #4FB39A;
  --accent-lift: #6BC9B2;
  --ochre:       #C08A3E;
  --grain-op:    .22;
}

/* Explicit light, so the toggle can override a stored dark preference. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:          #E4E1D9;
  --bg-raised:   #EDEAE2;
  --bg-sunk:     #D8D4CA;
  --ink:         #14181B;
  --ink-2:       #474E54;
  --ink-3:       #6E767C;
  --rule:        #C6C1B5;
  --rule-soft:   #D3CFC4;
  --accent:      #23695A;
  --accent-lift: #2F8C77;
  --ochre:       #9A6725;
  --grain-op:    .30;
}

/* Stagger utilities. These exist so no element needs a style attribute, which
   lets the Content-Security-Policy forbid inline styles outright. */
.d1  { --d: 60ms; }
.d2  { --d: 120ms; }
.d3  { --d: 180ms; }
.d4  { --d: 240ms; }
.d5  { --d: 320ms; }
.d6  { --d: 440ms; }
.d7  { --d: 520ms; }
.d8  { --d: 680ms; }
.d9  { --d: 790ms; }
.d10 { --d: 880ms; }
.d11 { --d: 990ms; }
.d12 { --d: 1120ms; }
.d13 { --d: 1240ms; }
.d14 { --d: 1360ms; }