/* Hallmark · genre: editorial · design-system: design.md · designed-as-app
 * ExecutorPilot tokens — the single source of truth. Pages link this BEFORE
 * their inline styles. Canonical names first; legacy aliases keep older inline
 * styles resolving. Colors computed from the original brand hex (see design.md).
 */
:root{
  /* canonical color tokens */
  --color-paper:        oklch(98.5% 0.004 91.4);
  --color-paper-2:      oklch(94.9% 0.012 178.0);
  --color-card:         oklch(100% 0 0);
  --color-ink:          oklch(27.7% 0.020 206.4);
  --color-ink-2:        oklch(51.5% 0.020 205.8);
  --color-rule:         oklch(92.7% 0.006 183.0);
  --color-brand:        oklch(44.4% 0.064 189.3);
  --color-brand-deep:   oklch(34.1% 0.047 188.8);
  --color-accent:       oklch(77.5% 0.151 72.2);
  --color-accent-hover: oklch(74.0% 0.154 70.2);
  --color-accent-ink:   oklch(28.7% 0.054 74.8);
  --color-focus:        oklch(44.4% 0.064 189.3);
  --color-danger:       oklch(47.1% 0.140 29.4);
  --color-danger-bg:    oklch(94.9% 0.019 33.4);
  --color-warn:         oklch(50.9% 0.103 70.8);
  --color-warn-bg:      oklch(96.1% 0.028 84.6);
  --color-ok:           oklch(44.4% 0.064 189.3);
  --color-ok-bg:        oklch(94.9% 0.012 178.0);
  --color-paper-3:      oklch(96.6% 0.004 210.0);   /* #f4f7f8 zebra/soft panel */
  --color-brand-soft:   oklch(55.6% 0.045 187.0);   /* #4d7d77 outline on dark */
  --color-gate-ink:     oklch(95.8% 0.008 175.0);   /* #eef5f3 text on gate */
  --color-gate-muted:   oklch(87.9% 0.019 178.0);   /* #cfe0dc */
  --color-gate-soft:    oklch(91.0% 0.017 175.0);   /* #dcebe7 */
  --color-gate-fine:    oklch(74.7% 0.030 180.0);   /* #9fbdb6 */
  --color-gate-ok:      oklch(91.4% 0.021 175.0);   /* #d6ece6 */
  --color-gate-err:     oklch(88.7% 0.052 31.0);    /* #ffd2c9 */

  /* typography */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-display: clamp(2rem, 5.5vw, 2.75rem);
  --text-h2: clamp(1.45rem, 3.2vw, 1.75rem);
  --text-stage: clamp(1.6rem, 4vw, 2.1rem);

  /* spacing — 4pt scale */
  --space-3xs: .25rem; --space-2xs: .5rem; --space-xs: .75rem;
  --space-sm: 1rem;    --space-md: 1.5rem; --space-lg: 2rem;
  --space-xl: 3rem;    --space-2xl: 4.5rem; --space-3xl: 7rem;

  /* motion + shape */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;
  --radius-card: 14px; --radius-input: 10px; --radius-pill: 999px;
  --rule-hair: 1px solid var(--color-rule);
  --rule-spine: 3px solid var(--color-brand);

  /* legacy aliases — keep older inline styles resolving; new code uses canonical names */
  --ink: var(--color-ink); --muted: var(--color-ink-2); --line: var(--color-rule);
  --bg: var(--color-paper); --card: var(--color-card);
  --teal: var(--color-brand); --teal-d: var(--color-brand-deep);
  --ochre: var(--color-accent);
  --danger: var(--color-danger); --danger-bg: var(--color-danger-bg);
  --warn: var(--color-warn); --warn-bg: var(--color-warn-bg);
  --ok: var(--color-ok); --ok-bg: var(--color-ok-bg);
}

/* shared chrome — masthead + colophon (every page) */
.masthead{display:flex;justify-content:space-between;align-items:center;gap:var(--space-sm);
  padding:14px 0;border-bottom:var(--rule-hair)}
.masthead .brand{font-weight:700;letter-spacing:.3px;color:var(--color-brand-deep);font-size:18px;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.masthead .brand span{color:var(--color-brand)}
.masthead nav{display:flex;gap:var(--space-md);font-size:14px}
.masthead nav a{color:var(--color-ink-2);font-weight:600;text-decoration:none}
.masthead nav a:hover{color:var(--color-brand-deep)}
.masthead nav a:focus-visible,.colophon a:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px;border-radius:2px}
@media(max-width:420px){.masthead nav{gap:var(--space-sm)}.masthead nav a{font-size:13px}}

.colophon{border-top:var(--rule-spine);margin-top:var(--space-2xl);padding:var(--space-lg) 0 var(--space-xl);font-size:13.5px}
.colophon .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-md);text-align:left;margin:0 0 var(--space-lg)}
.colophon h3{font-family:var(--font-display);font-weight:400;font-style:normal;font-size:17px;margin:0 0 6px;color:var(--color-brand-deep)}
.colophon ul{list-style:none;margin:0;padding:0}
.colophon li{margin:4px 0}
.colophon a{color:var(--color-ink-2);font-weight:500;text-decoration:none}
.colophon a:hover{color:var(--color-brand);text-decoration:underline}
.colophon .disc{color:var(--color-ink-2);max-width:62ch;margin:0 0 10px}
.colophon .legal{color:var(--color-ink-2)}

/* shared a11y floor — real focus everywhere, disabled state, reduced motion */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,[role=tab]:focus-visible{
  outline:2px solid var(--color-focus);outline-offset:2px}
button:disabled{opacity:.55;cursor:progress}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}