/* Zynim web layer — base styles, grounds, the Bootstrap 5.3 theme (light and dark) and the brand helpers.
   Load Bootstrap first, then this file (it imports tokens.css):
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="zynim.css" rel="stylesheet">
   Dark mode is Bootstrap's own: data-bs-theme="dark" on <html> (README §8). */
@import "tokens.css";

/* ── Base ── */
body{margin:0;font-family:var(--font-core);font-optical-sizing:auto;font-weight:var(--weight-book);font-size:var(--type-body-size);line-height:var(--type-body-line);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
::selection{background:var(--selection-bg);color:var(--selection-fg)}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid var(--link-underline);transition:var(--transition-control)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--link-underline-hover)}
/* Navigation carries its own affordance — no underline rule. (Buttons and cards keep their full border: their class outranks a{}.) */
.nav-link,.navbar-brand,.dropdown-item,.zy-plain{border-bottom:0}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:var(--weight-black);color:var(--text-heading);text-wrap:balance}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ── Grounds: a band or page committed to one background. The tokens re-point inside dark ones (tokens.css). ── */
.zy-ground-light{background:var(--surface-page);color:var(--text-body)}
.zy-ground-dark{background:var(--zy-indigo-900);color:var(--text-body)}
.zy-ground-graphite{background:var(--zy-ink-600);color:var(--text-body)}

/* ── Bootstrap 5.3 variables re-pointed at the tokens: light ── */
:root,[data-bs-theme=light]{
  --bs-primary:#ED7A1C; --bs-primary-rgb:237,122,28;
  --bs-secondary:#4A5590; --bs-secondary-rgb:74,85,144;
  --bs-dark:#22284A; --bs-dark-rgb:34,40,74;
  --bs-light:#F4F5F5; --bs-light-rgb:244,245,245;
  --bs-body-bg:#FAF8F5; --bs-body-bg-rgb:250,248,245;
  --bs-body-color:#313536; --bs-body-color-rgb:49,53,54;
  --bs-emphasis-color:#595D5E; --bs-emphasis-color-rgb:89,93,94;
  --bs-secondary-color:#646E75; --bs-secondary-color-rgb:100,110,117;
  --bs-secondary-bg:#F1EFEB; --bs-secondary-bg-rgb:241,239,235; --bs-tertiary-bg:#F4F5F5; --bs-tertiary-bg-rgb:244,245,245;
  --bs-border-color:#D6D9DA;
  --bs-link-color:#4A5590; --bs-link-color-rgb:74,85,144; --bs-link-hover-color:#22284A; --bs-link-hover-color-rgb:34,40,74;
  --bs-heading-color:#595D5E;
  --bs-focus-ring-color:rgba(74,85,144,.18);
  --bs-form-invalid-color:#8F470D; --bs-form-invalid-border-color:#A55C15;
  --bs-form-valid-color:#2F3866; --bs-form-valid-border-color:#4A5590;
}
/* ── … and dark (after Bootstrap's own [data-bs-theme=dark] block, so these win) ── */
[data-bs-theme=dark]{
  color-scheme:dark;
  --bs-body-bg:#161A31; --bs-body-bg-rgb:22,26,49;
  --bs-body-color:#C7CDE8; --bs-body-color-rgb:199,205,232;
  --bs-emphasis-color:#FFFFFF; --bs-emphasis-color-rgb:255,255,255;
  --bs-secondary-color:#8B96C4; --bs-secondary-color-rgb:139,150,196;
  --bs-secondary-bg:#1B2140; --bs-secondary-bg-rgb:27,33,64; --bs-tertiary-bg:#22284A; --bs-tertiary-bg-rgb:34,40,74;
  --bs-border-color:rgba(255,255,255,.14);
  --bs-link-color:#9AA6D6; --bs-link-color-rgb:154,166,214; --bs-link-hover-color:#FFFFFF; --bs-link-hover-color-rgb:255,255,255;
  --bs-heading-color:#FFFFFF;
  --bs-focus-ring-color:rgba(154,166,214,.32);
  --bs-form-invalid-color:#F2953F; --bs-form-invalid-border-color:#F2953F;
  --bs-form-valid-color:#9AA6D6; --bs-form-valid-border-color:#9AA6D6;
}
/* Shared by both modes */
:root{
  --bs-body-font-family:var(--font-core); --bs-body-font-weight:300; --bs-body-line-height:1.62;
  --bs-font-monospace:var(--font-mono);
  --bs-border-radius:2px; --bs-border-radius-sm:2px; --bs-border-radius-lg:2px; --bs-border-radius-xl:2px; --bs-border-radius-2xl:2px; --bs-border-radius-pill:2px;
  --bs-box-shadow:var(--shadow-overlay); --bs-box-shadow-lg:var(--shadow-modal);
}
h1,.h1{font-size:var(--type-h1-size);line-height:var(--type-h1-line);letter-spacing:var(--type-h1-track)}
h2,.h2{font-size:var(--type-h2-size);line-height:var(--type-h2-line);letter-spacing:var(--type-h2-track)}
h3,.h3{font-size:var(--type-h3-size);line-height:var(--type-h3-line);letter-spacing:var(--type-h3-track)}
h4,.h4{font-size:var(--type-h4-size);line-height:var(--type-h4-line);letter-spacing:var(--type-h4-track)}
.display-1{font-size:var(--type-display-1-size);line-height:var(--type-display-1-line);letter-spacing:var(--type-display-1-track);font-weight:800}
.display-2{font-size:var(--type-display-2-size);line-height:var(--type-display-2-line);letter-spacing:var(--type-display-2-track);font-weight:800}

/* Buttons: flat fill, near-black label on Tango, white on indigo. One primary per view. */
.btn{--bs-btn-font-weight:400;--bs-btn-border-radius:2px;--bs-btn-padding-x:1.25rem;--bs-btn-padding-y:.6875rem;--bs-btn-font-size:.9375rem;transition:var(--transition-control)}
.btn-primary{--bs-btn-bg:#ED7A1C;--bs-btn-border-color:#ED7A1C;--bs-btn-color:#151718;--bs-btn-hover-bg:#C87A21;--bs-btn-hover-border-color:#C87A21;--bs-btn-hover-color:#151718;--bs-btn-active-bg:#A55C15;--bs-btn-active-border-color:#A55C15;--bs-btn-active-color:#FFFFFF;--bs-btn-disabled-bg:#ED7A1C;--bs-btn-disabled-border-color:#ED7A1C;--bs-btn-disabled-color:#151718}
.btn-secondary{--bs-btn-bg:#4A5590;--bs-btn-border-color:#4A5590;--bs-btn-color:#FFFFFF;--bs-btn-hover-bg:#2F3866;--bs-btn-hover-border-color:#2F3866;--bs-btn-hover-color:#FFFFFF;--bs-btn-active-bg:#22284A;--bs-btn-active-border-color:#22284A;--bs-btn-active-color:#FFFFFF}
.btn-outline-dark{--bs-btn-color:#313536;--bs-btn-border-color:#ADB1B2;--bs-btn-hover-bg:#F4F5F5;--bs-btn-hover-border-color:#595D5E;--bs-btn-hover-color:#313536}
.btn-outline-light{--bs-btn-color:#FFFFFF;--bs-btn-border-color:rgba(255,255,255,.34);--bs-btn-hover-bg:rgba(255,255,255,.08);--bs-btn-hover-border-color:#FFFFFF;--bs-btn-hover-color:#FFFFFF}
/* On a dark ground the quiet outline button is the light one, whichever class the markup used. */
[data-bs-theme=dark] .btn-outline-dark,.zy-ground-dark .btn-outline-dark,.zy-ground-graphite .btn-outline-dark{--bs-btn-color:#FFFFFF;--bs-btn-border-color:rgba(255,255,255,.34);--bs-btn-hover-bg:rgba(255,255,255,.08);--bs-btn-hover-border-color:#FFFFFF;--bs-btn-hover-color:#FFFFFF}
.btn:focus-visible{box-shadow:var(--shadow-focus)}

/* Cards: hairline border, never a shadow. Forms: indigo focus. */
.card{--bs-card-border-color:var(--rule-color);--bs-card-border-radius:2px;--bs-card-inner-border-radius:2px;--bs-card-spacer-x:1.5rem;--bs-card-spacer-y:1.5rem;--bs-card-bg:transparent;--bs-card-color:var(--text-body);box-shadow:none}
.form-control,.form-select{font-weight:300;border-color:var(--rule-strong-color)}
.form-control:focus,.form-select:focus{border-color:var(--focus-ring);box-shadow:0 0 0 3px var(--bs-focus-ring-color)}
.form-check-input:checked{background-color:#4A5590;border-color:#4A5590}
.form-check-input[type=radio]{border-radius:50%}
.nav-tabs{--bs-nav-tabs-border-color:var(--rule-color);--bs-nav-tabs-border-width:2px;--bs-nav-tabs-border-radius:0;--bs-nav-tabs-link-active-border-color:transparent transparent var(--rule-accent-color);--bs-nav-tabs-link-active-bg:transparent;--bs-nav-tabs-link-active-color:var(--text-heading)}
.dropdown-menu{--bs-dropdown-border-color:var(--rule-color);--bs-dropdown-border-radius:2px}
.accordion{--bs-accordion-border-color:var(--rule-color);--bs-accordion-border-radius:2px;--bs-accordion-inner-border-radius:2px;--bs-accordion-bg:transparent;--bs-accordion-active-bg:transparent;--bs-accordion-active-color:var(--text-heading);--bs-accordion-btn-focus-box-shadow:var(--shadow-focus)}
.modal-backdrop{--bs-backdrop-bg:#0A0C0C;--bs-backdrop-opacity:.42}
.table{--bs-table-border-color:var(--rule-color);--bs-table-bg:transparent;--bs-table-color:var(--text-body)}
hr{border-color:var(--rule-color);opacity:1}

/* ── Brand helpers (plain HTML; no Bootstrap equivalent) ── */
.zy-eyebrow{font-size:var(--type-eyebrow-size);line-height:var(--type-eyebrow-line);letter-spacing:var(--type-eyebrow-track);text-transform:uppercase;font-weight:400;color:var(--text-muted)}
.zy-standfirst{font-size:var(--type-body-lg-size);line-height:var(--type-body-lg-line);font-weight:300;color:var(--text-muted)}
.zy-rule{height:1px;background:var(--rule-color);border:0;opacity:1}
.zy-rule-accent{height:2px;background:var(--rule-accent-color);border:0;opacity:1}
.zy-figure{font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-figure);line-height:1}
.zy-steps{display:grid;gap:1px;background:var(--rule-color);grid-template-columns:minmax(0,1fr)}
.zy-steps>*{background:var(--surface-step-card);padding:var(--space-6)}
/* Muted text on a dark step card: indigo-400 is 4.3:1 on indigo-800, indigo-300 is 5.3:1. */
[data-bs-theme=dark] .zy-steps,.zy-ground-dark .zy-steps,.zy-ground-graphite .zy-steps{--text-muted:var(--zy-indigo-300)}
@media(min-width:768px){.zy-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1200px){.zy-steps{grid-template-columns:repeat(var(--step-cols,4),minmax(0,1fr))}}
.zy-internal{color:var(--zy-internal);font-size:13px}

/* ── Light/dark artwork: every figure and the wordmark ship as a pair; the ground decides which shows.
   <img class="zy-on-light" src="figures/x-light.svg" alt="…"><img class="zy-on-dark" src="figures/x-dark.svg" alt="">
   (give the second one an empty alt so a screen reader announces the figure once). ── */
.zy-on-dark{display:none}
[data-bs-theme=dark] .zy-on-light,.zy-ground-dark .zy-on-light,.zy-ground-graphite .zy-on-light{display:none}
[data-bs-theme=dark] .zy-on-dark,.zy-ground-dark .zy-on-dark,.zy-ground-graphite .zy-on-dark{display:inline-block}