/* ============================================================
   YesBOS design tokens — SINGLE SOURCE OF TRUTH
   Change a value here and it updates across the whole site.
   Colours map to the official YesBOS Brand Guidelines palette.
   ============================================================ */

/* ------------------------------------------------------------
   Brand asset architecture (Mark / Wordmark / Lockup)
   No JS component system on this static site, so "reusable"
   means: one canonical file/pattern, referenced everywhere.

   Mark    → assets/branding/yesbos-mark.svg — the isolated "Y"
             symbol only. Transparent bg, no circle/glow/text.
             Used for: header, footer, favicon.svg, app icons.
   Wordmark→ inline markup, not a separate asset:
             <span class="text-ink">Yes<span class="text-save">BOS</span></span>
             "Yes" = Ink, "BOS" = Emerald (var(--color-success)).
   Lockup  → full mark + wordmark + tagline, hero section only
             (assets/yesbos-lockup-dark.png). Do not extract/copy
             its markup elsewhere — the hero owns that asset.
             assets/logo.svg is a separate compact horizontal
             lockup used only for the og:image social preview.
   ------------------------------------------------------------ */
:root {
  /* Brand */
  --color-brand:        #22653A;  /* Forest Green (primary)        */
  --color-brand-dark:   #0D5831;  /* Button Green (hover / active) */
  --color-brand-tint:   #E7EFEA;  /* subtle Forest tint (chips, highlights) */

  /* Surfaces */
  --color-background:   #FFFFFF;  /* page background     */
  --color-surface:      #FFFFFF;  /* cards / panels      */
  --color-surface-alt:  #E6E6E6;  /* alternating section bands (Background grey) */
  --color-night:        #0B0F0D;  /* dark sections       */

  /* Borders */
  --color-border:       #D6D8D4;  /* default card / divider border */
  --color-border-subtle:#E6E6E6;  /* faint separators              */

  /* Text */
  --color-text:         #242F29;  /* Ink (primary)          */
  --color-text-secondary:#5C5E5E; /* Grey (body secondary)  */
  --color-text-nav:     #6A6D6B;  /* Navigation Grey (nav + tagline) */

  /* Status */
  --color-success:      #2E8B57;  /* Emerald */

  /* Typography — change these two lines to swap fonts globally */
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Source Serif 4', Georgia, serif;
}

/* Base */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Display headings driven by the font token above */
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.015em; }
h1.font-extrabold, h2.font-extrabold, h3.font-extrabold { font-weight: 600; }
h3.font-bold { font-weight: 600; }

/* Consistent, accessible focus states on every interactive element */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: 4px;
}