/*
  TCB Design Tokens
  Sitewide design system: official brand palette (TCB Logo Usage 2024), font stacks,
  pill button spec, link and focus styles.

  Vehicle: child-theme file at x-child/tcb-design-tokens.css, enqueued from x-child functions.php.

  Scope philosophy:
  - Tokens are global on :root and safe to reference anywhere.
  - Buttons are OPT-IN via .tcb-btn classes only. No blanket button or anchor restyle.
  - Keyboard focus outlines are sitewide (keyboard focus only, pure accessibility win).
  - Font application still lives in the existing WPCode snippets; these are reference tokens.

  House rules: no em dashes anywhere. Pill radius 999px. No arrow glyphs.
*/

:root {
  /* Official brand palette (TCB Logo Usage 2024) */
  --tcb-slate: #38464d;
  --tcb-blue: #348abf;
  --tcb-blue-light: #72b2d9;
  --tcb-taupe: #4d4638;
  --tcb-tan: #a0896e;
  --tcb-offwhite: #f9f8f7;
  --tcb-orange: #cc6d33;
  --tcb-gold: #cc9c33;
  --tcb-yellow: #f9b900;
  --tcb-cream: #faf1db;
  --tcb-forest: #466144;
  --tcb-green: #548c4b;

  /* Functional alert red. Not a brand palette color; hue-shifted toward brand warmth. Proposed, pending sign-off. */
  --tcb-alert: #c0452e;

  /* Derived hover shades (not brand colors) */
  --tcb-blue-dark: #2b7099;
  --tcb-orange-dark: #a9551f;

  /* Legacy tokens retained so already-migrated pages render unchanged. Slated for retirement (see mapping). */
  --tcb-yellow-dark: #b48800;
  --tcb-red: #c8302c;
  --tcb-zone-blue: #3f72a4;

  /* Semantic aliases */
  --tcb-text: var(--tcb-slate);
  --tcb-link: var(--tcb-blue);
  --tcb-link-hover: var(--tcb-blue-dark);
  --tcb-focus: var(--tcb-slate);

  /* Font stacks (reference tokens; live application stays in WPCode for now) */
  --tcb-font-head: "Bitter", Georgia, serif;
  --tcb-font-body: "Lato", system-ui, sans-serif;

  /* Pill button spec */
  --tcb-btn-radius: 999px;
  --tcb-btn-pad-y: 0.7em;
  --tcb-btn-pad-x: 1.6em;
  --tcb-btn-weight: 700;
  --tcb-btn-font-size: 1rem;
  --tcb-btn-transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* ============================================================
   Opt-in pill buttons
   ============================================================ */
.tcb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--tcb-font-body);
  font-size: var(--tcb-btn-font-size);
  font-weight: var(--tcb-btn-weight);
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  padding: var(--tcb-btn-pad-y) var(--tcb-btn-pad-x);
  border-radius: var(--tcb-btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--tcb-btn-transition);
}
.tcb-btn--primary {
  background-color: var(--tcb-blue);
  border-color: var(--tcb-blue);
  color: var(--tcb-cream);
}
.tcb-btn--primary:hover,
.tcb-btn--primary:focus {
  background-color: var(--tcb-blue-dark);
  border-color: var(--tcb-blue-dark);
  color: var(--tcb-cream);
}
.tcb-btn--secondary {
  background-color: transparent;
  border-color: var(--tcb-blue);
  color: var(--tcb-blue);
}
.tcb-btn--secondary:hover,
.tcb-btn--secondary:focus {
  background-color: var(--tcb-blue);
  color: var(--tcb-cream);
}
.tcb-btn--sm { font-size: 0.85rem; padding: 0.55em 1.2em; }
.tcb-btn--lg { font-size: 1.15rem; padding: 0.85em 2em; }

/* ============================================================
   Opt-in content link
   ============================================================ */
.tcb-link {
  color: var(--tcb-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tcb-link:hover,
.tcb-link:focus {
  color: var(--tcb-link-hover);
}

/* ============================================================
   Sitewide keyboard focus visibility (accessibility)
   ============================================================ */
a:focus-visible,
button:focus-visible,
.tcb-btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tcb-focus) !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .tcb-btn { transition: none; }
}

/* ============================================================
   Legacy chrome blue correction (sitewide)
   Remaps the old brand blue (#2c9acf) and its dark depth shade
   (#237ba6) in theme-generated chrome to the official palette.
   Scope: shared theme chrome only (global buttons, .custom-button,
   mobile anchor, old footer social links). Tribe (Events Calendar)
   button selectors are intentionally excluded so the events pages
   render unchanged. Selectors are prefixed with body to raise
   specificity above the theme cs-inline rules, so they win even
   where the theme also marks the value important (footer social
   links and .custom-button border and shadow).
   ============================================================ */
body .x-btn,
body .button,
body [type="submit"] {
  background-color: var(--tcb-blue, #348abf) !important;
  border-color: var(--tcb-blue, #348abf) !important;
}
body .x-btn,
body .button,
body [type="submit"],
body .x-btn.x-btn-real {
  box-shadow: 0 0.15em 0 0 var(--tcb-blue-dark, #2b7099), 0 4px 4px rgba(0, 0, 0, 0.30) !important;
}
body .mbf-b.x-anchor {
  border-color: var(--tcb-blue, #348abf) !important;
  background-color: var(--tcb-blue, #348abf) !important;
}
body .custom-button {
  background: var(--tcb-blue, #348abf) !important;
  background-image: linear-gradient(var(--tcb-blue-dark, #2b7099), var(--tcb-blue, #348abf)) !important;
  border: 1px solid var(--tcb-blue-dark, #2b7099) !important;
  box-shadow: 0 0.1em 0 0 var(--tcb-blue-dark, #2b7099) !important;
}
body .x-colophon.bottom .x-social-global a {
  color: var(--tcb-blue, #348abf) !important;
}