/*
 * TCC theme for Web Awesome 3
 * ---------------------------------------------------------------
 * Load after Web Awesome's own stylesheet. Defines:
 *   1. Self-hosted brand fonts
 *   2. TCC brand tokens (--tcc-*) for light and dark
 *   3. Web Awesome theme variables (--wa-*) mapped onto those tokens
 *
 * Dark mode follows Web Awesome's convention: the .wa-dark class on <html>.
 * Variable names are from Web Awesome 3.0 - check them against the version
 * you self-host if anything doesn't pick up the brand.
 */

/* 1. Fonts ------------------------------------------------------ */
/* Both families are SIL Open Font License. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/content/font/bricolage-grotesque/bricolage-grotesque-latin-standard-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("/content/font/instrument-sans/instrument-sans-latin-standard-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* 2. Brand tokens ---------------------------------------------- */
:root,
.wa-light {
  /* fixed brand colours (same in light and dark) */
  --tcc-navy: #0f2b50;
  --tcc-blue: #184c8c;
  --tcc-mint: #7fe3cf;
  --tcc-mint-hover: #9aebd9;
  --tcc-sage: #b9e6a6;
  --tcc-teal-bright: #2bbfb0;
  --tcc-star: #e8a317;

  /* semantic tokens */
  --tcc-bg: #ffffff;
  --tcc-surface: #f3f7fb;
  --tcc-surface-2: #eef3f8;
  --tcc-ink: #0f2b50;
  --tcc-muted: #3d4a5c;
  --tcc-line: #cfdbe8;
  --tcc-link: #184c8c;
  --tcc-link-ink: #ffffff;
  --tcc-accent: #0f8277;
  --tcc-accent-blue: #2f6bb3;
  --tcc-cta: #184c8c;
  --tcc-cta-hover: #0f2b50;
  --tcc-cta-ink: #ffffff;
  --tcc-flag: #7fe3cf;
  --tcc-flag-ink: #0f2b50;
  --tcc-pill-bg: #d9f0df;
  --tcc-pill-text: #0a5a2e;
  --tcc-strip-bg: #e6f4ea;
  --tcc-strip-line: #86c79a;
  --tcc-strip-text: #0a3d22;

  /* navy bands (hero, why, final CTA) stay navy in both modes */
  --tcc-band-bg: #0f2b50;
  --tcc-band-ink: #ffffff;
  --tcc-band-muted: #d8e4f1;

  color-scheme: light;
}

.wa-dark {
  --tcc-bg: #0b1a30;
  --tcc-surface: #112440;
  --tcc-surface-2: #142a49;
  --tcc-ink: #e8eef7;
  --tcc-muted: #a9b8cc;
  --tcc-line: #27436a;
  --tcc-link: #6aa2e0;
  --tcc-link-ink: #0b1a30;
  --tcc-accent: #4fd1c4;
  --tcc-accent-blue: #6aa2e0;
  --tcc-cta: #7fe3cf;
  --tcc-cta-hover: #9aebd9;
  --tcc-cta-ink: #0f2b50;
  --tcc-pill-bg: #1b4a3a;
  --tcc-pill-text: #b9e6a6;
  --tcc-strip-bg: #10332a;
  --tcc-strip-line: #2f7a5a;
  --tcc-strip-text: #d3f2df;

  color-scheme: dark;
}

/* 3. Web Awesome mapping --------------------------------------- */
:root,
.wa-light,
.wa-dark {
  /* typography */
  --wa-font-family-body: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --wa-font-family-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --wa-font-family-longform: var(--wa-font-family-body);
  --wa-font-weight-heading: 800;

  /* shape */
  --wa-border-radius-s: 6px;
  --wa-border-radius-m: 8px;
  --wa-border-radius-l: 12px;

  /* surfaces and text */
  --wa-color-surface-default: var(--tcc-bg);
  --wa-color-surface-raised: var(--tcc-surface);
  --wa-color-surface-lowered: var(--tcc-surface-2);
  --wa-color-surface-border: var(--tcc-line);
  --wa-color-text-normal: var(--tcc-ink);
  --wa-color-text-quiet: var(--tcc-muted);
  --wa-color-text-link: var(--tcc-link);
  --wa-color-focus: var(--tcc-teal-bright);

  /* brand = TCC call-to-action colour */
  --wa-color-brand-fill-loud: var(--tcc-cta);
  --wa-color-brand-on-loud: var(--tcc-cta-ink);
  --wa-color-brand-border-loud: var(--tcc-cta);
  --wa-color-brand-fill-normal: color-mix(in oklab, var(--tcc-cta) 22%, var(--tcc-bg));
  --wa-color-brand-on-normal: var(--tcc-ink);
  --wa-color-brand-border-normal: color-mix(in oklab, var(--tcc-cta) 55%, var(--tcc-bg));
  --wa-color-brand-fill-quiet: color-mix(in oklab, var(--tcc-cta) 10%, var(--tcc-bg));
  --wa-color-brand-on-quiet: var(--tcc-link);
  --wa-color-brand-border-quiet: color-mix(in oklab, var(--tcc-cta) 30%, var(--tcc-bg));
}

/* 4. Drawers ---------------------------------------------------- */
/* When a drawer opens, Web Awesome reserves the scrollbar's space so the page does not
   shift, but the drawer and its backdrop stop short of that space and leave an uncovered
   strip beside them. Release it so drawers reach the edge of the window. (Web Awesome
   sets this variable from script, so it is overridden with !important.) */
html.wa-scroll-lock {
  --wa-scroll-lock-gutter: auto !important;
}
/* With the scrollbar gone the window is wider, which would shift the page right.
   Web Awesome records the scrollbar's width while locked; pad the page by it so the
   content stays put. (The padding sits under the open drawer.) */
html.wa-scroll-lock body {
  padding-right: var(--wa-scroll-lock-size, 0px);
}