/* =============================================================
   BayconAI design tokens — color, type, spacing, motion.
   Loaded by every page. Element-level type rules live in
   colors_and_type.css (marketing pages only); header/footer in chrome.css.
   Fonts are loaded with <link> tags in each page <head> (no @import chain).
   ============================================================= */
/* Metric-adjusted local fallbacks, so the swap to the web fonts shifts layout as little as possible */
@font-face { font-family: 'Newsreader Fallback'; src: local('Georgia'); size-adjust: 96%; ascent-override: 92%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Fallback'; src: local('Arial'); size-adjust: 103%; ascent-override: 93%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Geist Mono Fallback'; src: local('Courier New'); size-adjust: 100%; ascent-override: 90%; descent-override: 25%; line-gap-override: 0%; }

:root {
  --bg-page:        #faf7f2;
  --bg-card:        #ffffff;
  --bg-sunken:      #f2ece1;
  --bg-band:        #efe7d8;

  --ink-1:          #1c1815;
  --ink-2:          #5a5147;
  /* was #8a7e6f (3.7:1 on the page background). #675c4d is >= 4.7:1 on every light surface. */
  --ink-3:          #675c4d;
  --ink-inv:        #faf7f2;

  --hairline:       #e6dccb;
  --hairline-strong:#cdbfa6;
  /* boundaries of form controls and other UI components: >= 3:1 against the page */
  --control-border: #7d7261;

  /* was #b14a25 (4.4:1 on the band surface). */
  --accent:         #a8431f;
  --accent-hover:   #8f3919;
  --accent-press:   #7e3318;
  --accent-soft:    #f0d6c4;

  --moss:           #4a5d3a;
  --amber:          #7a5806;
  --rose:           #a83232;

  --font-display: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --font-body:    'Geist', 'Geist Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', 'Geist Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace;

  --size-display-xl: 80px;
  --size-display-l:  56px;
  --size-display-m:  36px;
  --size-h1:         32px;
  --size-h2:         24px;
  --size-h3:         20px;
  --size-h4:         17px;
  --size-body:       17px;
  --size-small:      15px;
  --size-caption:    14px;
  /* smallest allowed text: was 10-11px in many places */
  --size-micro:      13px;

  --lh-display:      0.98;
  --lh-tight:        1.1;
  --lh-snug:         1.3;
  --lh-body:         1.55;
  --lh-loose:        1.65;

  --track-display:  -0.018em;
  --track-tight:    -0.005em;
  --track-normal:    0;
  --track-eyebrow:   0.08em;
  --track-mono:     -0.01em;

  --s-1:   4px;  --s-2:   8px;  --s-3:  12px;  --s-4:  16px;  --s-5:  24px;
  --s-6:  32px;  --s-7:  48px;  --s-8:  64px;  --s-9:  96px;  --s-10: 128px;

  --radius-0: 0; --radius-1: 2px; --radius-2: 6px; --radius-3: 10px;

  --border-hairline:   1px solid var(--hairline);
  --border-strong:     1px solid var(--ink-1);
  --shadow-0:          none;
  --shadow-1:          0 1px 0 var(--hairline);
  --shadow-2:          0 8px 28px -16px rgba(28, 24, 21, 0.18);
  --shadow-focus:      0 0 0 2px var(--bg-page), 0 0 0 4px var(--accent);

  --ease:           cubic-bezier(0.2, 0, 0, 1);
  --t-fast:         160ms;
  --t-med:          240ms;
  --t-slow:         320ms;

  --measure-prose:  640px;
  --measure-page:   1120px;
  --measure-wide:   1280px;
  --header-height:  68px;
  --tap:            44px;
}

/* ---------- Dark ("ink") theme — flips every token --------- */
.bk-dark {
  --bg-page:        #161210;
  --bg-card:        #211b16;
  --bg-sunken:      #1b1613;
  --bg-band:        #1b1613;

  --ink-1:          #f3ecdf;
  --ink-2:          #c4b7a3;
  /* was #8d8069 (4.4:1 on the dark card surface) */
  --ink-3:          #a39680;
  --ink-inv:        #161210;

  --hairline:       rgba(243, 236, 223, 0.12);
  --hairline-strong:rgba(243, 236, 223, 0.24);
  --control-border: #a39680;

  --accent:         #e06a38;
  --accent-hover:   #ef7b49;
  --accent-press:   #c5582b;
  --accent-soft:    rgba(224, 106, 56, 0.16);

  background: var(--bg-page);
  color: var(--ink-1);
}

html {
  background: var(--bg-page);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* keep sticky/fixed header from covering anchor targets and focused elements */
  scroll-padding-top: calc(var(--header-height) + 20px);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}