/* CMA Design System tokens. Source: literature-page/mockup/tokens.css (2026-11-07), copied unchanged.
   Deployed to css/tokens.css in the cma-site repo (wp-content/cma/css/ on the server) and loaded by CMA-022 in cma-common.php. */
/* CMA Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --cma-surface-card: var(--cma-harbor-0); /* Cards and the default page. Light white, dark harbor 900. */
  --cma-surface-band: var(--cma-harbor-50); /* Cool bands: hero bands, the footer. Replaces surface-2 and the retired warm band surface-1. */
  --cma-surface-inset: var(--cma-harbor-50); /* Tiles and notes set into a card, code blocks. Shows on cards, not on bands. */
  --cma-surface-deep: var(--cma-harbor-900); /* The one dark band. White text on it 15.7:1. In dark mode give it a 1px cma-line-card edge. */
  --cma-surface-field: var(--cma-harbor-0); /* Inputs, selects, textareas and choice chips. */
  --cma-text-body: var(--cma-harbor-800); /* Body copy. 10.2:1 on cards light, 13.5:1 dark. On the live site the BuddyX Customizer body color (#334155) still applies until changed. */
  --cma-text-heading: var(--cma-harbor-950); /* Headings h1 to h6 and the menu. 17.7:1 light, 13.5:1 dark. The live site uses the Customizer heading color (#0f172a) until changed. */
  --cma-text-brand: var(--cma-deepwater); /* Brand headings on light bands and footer headings. 13.8:1 on white, 12.8:1 on the band. */
  --cma-text-meta: var(--cma-harbor-600); /* Dates, captions, form help, read times. 5.4:1 on cards, 5.1:1 on bands, 5.0:1 on tiles (light); 7.1:1 dark. */
  --cma-text-link: var(--cma-beacon-700); /* Links, eyebrows and other small blue text. 7.3:1 / 8.1:1. Underline links in running text. */
  --cma-text-link-hover: var(--cma-deepwater); /* Link hover: darker in light, near-white in dark, plus the underline. */
  --cma-text-field: var(--cma-harbor-950); /* Text in fields and chips, and form labels. 17.7:1 / 13.5:1. */
  --cma-text-on-action: var(--cma-harbor-0); /* Text and icons on cma-action and its hover and pressed states. 5.0:1 or more. */
  --cma-text-on-light: var(--cma-harbor-950); /* Text on light fills that stay light in both themes: cma-action-secondary, the helpline band, champagne. 7.4:1 on sky. */
  --cma-line-card: var(--cma-harbor-150); /* 1px card edges. Decorative (1.24:1 / 1.35:1): never the only edge of a control. */
  --cma-line-field: var(--cma-harbor-550); /* Field and chip edges. 4.7:1 / 4.5:1 (controls need 3:1). */
  --cma-line-focus: var(--cma-beacon-600); /* 2px keyboard focus ring. 5.0:1 on white, 3.1:1 on dark cards. */
  --cma-action: var(--cma-beacon-600); /* The one filled action color: primary buttons, checked chips. Royal blue means you can act on it. White text 5.0:1; 3.1:1 against a dark card. */
  --cma-action-hover: var(--cma-beacon-700); /* Primary button hover. White text 7.3:1. */
  --cma-action-pressed: var(--cma-beacon-800); /* Primary button pressed. White text 10.2:1. */
  --cma-action-secondary: var(--cma-daybreak-500); /* Secondary buttons. Text on it is cma-text-on-light (7.4:1); white fails (2.4:1). */
  --cma-band-helpline: var(--cma-daybreak-500); /* The (855) METH-FREE helpline band. Text cma-text-on-light; buttons on it are ink-filled with white text, never blue or sky. */
  --cma-edge-beacon: var(--cma-beacon-600); /* Blue top edge of an accent card (cma-accent-blue). */
  --cma-edge-daybreak: var(--cma-daybreak-500); /* Sky top edge of an accent card (cma-accent-sky). */
  --cma-edge-deep: var(--cma-harbor-950); /* Dark top edge of an accent card (cma-accent-ink) and footer columns; near-white in dark mode. */
  --cma-tile-beacon: var(--cma-beacon-50); /* Default icon tile and first quick-action tile. */
  --cma-tile-beacon-icon: var(--cma-beacon-700); /* Icon on cma-tile-beacon. 6.7:1 / 6.6:1. */
  --cma-tile-daybreak: var(--cma-daybreak-50); /* Second quick-action tile. */
  --cma-tile-daybreak-icon: var(--cma-deepwater); /* Icon on cma-tile-daybreak. 12.4:1 / 5.3:1. */
  --cma-tile-harbor: var(--cma-harbor-100); /* Third quick-action tile and resource rows. */
  --cma-tile-harbor-icon: var(--cma-deepwater); /* Icon on cma-tile-harbor. 11.8:1 / 11.2:1. */
  --cma-celebrate: var(--cma-medallion-200); /* Celebration fill: milestone badges, anniversary chips, the milestone tile. Always ringed in cma-celebrate-line. Celebration only; never in the same view as cma-danger. */
  --cma-celebrate-on: var(--cma-harbor-950); /* Text and icons on cma-celebrate. 12.0:1 / 9.7:1. */
  --cma-celebrate-line: var(--cma-medallion-700); /* Rings, banner edges and small celebration words. 6.4:1 on white, 5.9:1 on bands; 10.7:1 dark. */
  --cma-celebrate-soft: var(--cma-medallion-50); /* Milestone banner background, always with a 1px cma-celebrate-line edge. Text 9.0:1 / 10.9:1. */
  --cma-danger: var(--cma-flare-600); /* Errors, required marks, 2px error borders and destructive outline buttons. 5.8:1 / 7.0:1. Never a fill; never in the same view as cma-celebrate. */
  --cma-danger-soft: var(--cma-flare-50); /* Alert background, always with a 1px cma-danger edge. Text 8.9:1 / 13.4:1. */
  --cma-required: var(--cma-danger); /* The required asterisk after a label. Alias of cma-danger; the label keeps its asterisk so color is never the only sign. */
  --cma-harbor-0: #ffffff; /* Harbor (navy-tinted neutral), hue 235. Pure white: cards, fields, text on actions. */
  --cma-harbor-50: #f3f7fa; /* Harbor (navy-tinted neutral), hue 235. Cool band and inset tiles (light). */
  --cma-harbor-100: #e8eff3; /* Harbor (navy-tinted neutral), hue 235. Neutral tile (light); text and headings (dark). */
  --cma-harbor-150: #e0e8ed; /* Harbor (navy-tinted neutral), hue 235. Card edges (light). */
  --cma-harbor-200: #cfd9df; /* Harbor (navy-tinted neutral), hue 235. Spare: stronger light dividers. */
  --cma-harbor-300: #b2c0c9; /* Harbor (navy-tinted neutral), hue 235. Spare. */
  --cma-harbor-400: #9fb1bc; /* Harbor (navy-tinted neutral), hue 235. Meta text (dark). */
  --cma-harbor-500: #768d9b; /* Harbor (navy-tinted neutral), hue 235. Field edges (dark). */
  --cma-harbor-550: #607785; /* Harbor (navy-tinted neutral), hue 235. Field edges (light). */
  --cma-harbor-600: #566d7a; /* Harbor (navy-tinted neutral), hue 235. Meta text (light). */
  --cma-harbor-700: #415968; /* Harbor (navy-tinted neutral), hue 235. Spare: secondary text. */
  --cma-harbor-800: #2c4452; /* Harbor (navy-tinted neutral), hue 235. Body text (light). */
  --cma-harbor-850: #293b45; /* Harbor (navy-tinted neutral), hue 235. Card edges (dark). */
  --cma-harbor-875: #22333d; /* Harbor (navy-tinted neutral), hue 235. Neutral tile (dark). */
  --cma-harbor-900: #17252d; /* Harbor (navy-tinted neutral), hue 235. Cards and fields (dark); the deep band. */
  --cma-harbor-950: #0f1a20; /* Harbor (navy-tinted neutral), hue 235. Page and bands (dark); headings and ink (light). */
  --cma-beacon-50: #eff6ff; /* Beacon (action blue), hue 260. Blue tile (light). */
  --cma-beacon-100: #e0ecff; /* Beacon (action blue), hue 260. Spare: selected rows. */
  --cma-beacon-200: #c1d9ff; /* Beacon (action blue), hue 260. Spare. */
  --cma-beacon-300: #95bcfb; /* Beacon (action blue), hue 260. Links and blue text (dark). */
  --cma-beacon-400: #669bf1; /* Beacon (action blue), hue 260. Spare. */
  --cma-beacon-500: #4282ee; /* Beacon (action blue), hue 260. Spare. */
  --cma-beacon-600: #236ade; /* Beacon (action blue), hue 260. The action fill: white text 5.0:1. */
  --cma-beacon-700: #1251b4; /* Beacon (action blue), hue 260. Links and blue text (light); action hover. */
  --cma-beacon-800: #0b3d8b; /* Beacon (action blue), hue 260. Action pressed. */
  --cma-beacon-900: #0b2b5f; /* Beacon (action blue), hue 260. Spare: deep blue band. */
  --cma-beacon-950: #091e40; /* Beacon (action blue), hue 260. Spare. */
  --cma-beacon-875: #203351; /* Beacon. Blue tile (dark). */
  --cma-daybreak-50: #e9f4fa; /* Daybreak (morning sky), hue 231. Sky tile (light). */
  --cma-daybreak-500: #64b0dd; /* Daybreak. Secondary actions and the helpline band; dark text only (7.4:1). */
  --cma-daybreak-900: #183645; /* Daybreak. Sky tile (dark). */
  --cma-deepwater: #003049; /* Deepwater (brand navy), hue 238. Brand headings, link hover, tile icons (light). 13.8:1 on white. */
  --cma-medallion-50: #f8f0e0; /* Medallion (champagne, after CMA's chips and medallions). Milestone banner (light). */
  --cma-medallion-200: #ead2a4; /* Medallion. Badge and chip fill (light); text on the fill (dark). */
  --cma-medallion-700: #7a5a12; /* Medallion. Rings and small celebration words (light). */
  --cma-medallion-850: #3a3222; /* Medallion. Milestone banner (dark). */
  --cma-medallion-900: #2f2a1e; /* Medallion. Badge and chip fill (dark), deep bronze. */
  --cma-flare-50: #fcecef; /* Flare (crimson, a distress signal). Alert background (light). */
  --cma-flare-300: #ff8aa5; /* Flare. Danger text and outlines (dark). */
  --cma-flare-600: #c0264b; /* Flare. Danger text and outlines (light), 5.8:1 on white. */
  --cma-flare-900: #3a1a24; /* Flare. Alert background (dark). */
  --cma-blue: var(--cma-action); /* DEPRECATED 2026-11-07: use cma-action. Kept for one release because CMA-001 on the live site defines --cma-blue. */
  --cma-blue-ink: var(--cma-text-link); /* DEPRECATED 2026-11-07: use cma-text-link. Kept for one release because CMA-001 on the live site defines --cma-blue-ink. */
  --cma-sky: var(--cma-action-secondary); /* DEPRECATED 2026-11-07: use cma-action-secondary. Kept for one release because CMA-001 on the live site defines --cma-sky. */
  --cma-navy: var(--cma-text-brand); /* DEPRECATED 2026-11-07: use cma-text-brand. Kept for one release because CMA-001 on the live site defines --cma-navy. */
  --cma-ink: var(--cma-text-on-light); /* DEPRECATED 2026-11-07: use cma-text-on-light. Kept for one release because CMA-001 on the live site defines --cma-ink. */
  --cma-helpline-bg: var(--cma-band-helpline); /* DEPRECATED 2026-11-07: use cma-band-helpline. Kept for one release because CMA-001 on the live site defines --cma-helpline-bg. */
  --cma-border: var(--cma-line-card); /* DEPRECATED 2026-11-07: use cma-line-card. Kept for one release because CMA-001 on the live site defines --cma-border. */
  --cma-field-border: var(--cma-line-field); /* DEPRECATED 2026-11-07: use cma-line-field. Kept for one release because CMA-001 on the live site defines --cma-field-border. */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08); /* Theme Card preset. CMA cards use cma-border instead; use this only on theme cards. */
  --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12); /* Theme Card Hover preset. */
}
[data-theme="dark"] {
  --cma-surface-card: var(--cma-harbor-900);
  --cma-surface-band: var(--cma-harbor-950);
  --cma-surface-inset: var(--cma-harbor-950);
  --cma-surface-deep: var(--cma-harbor-900);
  --cma-surface-field: var(--cma-harbor-900);
  --cma-text-body: var(--cma-harbor-100);
  --cma-text-heading: var(--cma-harbor-100);
  --cma-text-brand: var(--cma-harbor-100);
  --cma-text-meta: var(--cma-harbor-400);
  --cma-text-link: var(--cma-beacon-300);
  --cma-text-link-hover: var(--cma-harbor-100);
  --cma-text-field: var(--cma-harbor-100);
  --cma-text-on-action: var(--cma-harbor-0);
  --cma-text-on-light: var(--cma-harbor-950);
  --cma-line-card: var(--cma-harbor-850);
  --cma-line-field: var(--cma-harbor-500);
  --cma-line-focus: var(--cma-beacon-600);
  --cma-action: var(--cma-beacon-600);
  --cma-action-hover: var(--cma-beacon-700);
  --cma-action-pressed: var(--cma-beacon-800);
  --cma-action-secondary: var(--cma-daybreak-500);
  --cma-band-helpline: var(--cma-daybreak-500);
  --cma-edge-beacon: var(--cma-beacon-600);
  --cma-edge-daybreak: var(--cma-daybreak-500);
  --cma-edge-deep: var(--cma-harbor-100);
  --cma-tile-beacon: var(--cma-beacon-875);
  --cma-tile-beacon-icon: var(--cma-beacon-300);
  --cma-tile-daybreak: var(--cma-daybreak-900);
  --cma-tile-daybreak-icon: var(--cma-daybreak-500);
  --cma-tile-harbor: var(--cma-harbor-875);
  --cma-tile-harbor-icon: var(--cma-harbor-100);
  --cma-celebrate: var(--cma-medallion-900);
  --cma-celebrate-on: var(--cma-medallion-200);
  --cma-celebrate-line: var(--cma-medallion-200);
  --cma-celebrate-soft: var(--cma-medallion-850);
  --cma-danger: var(--cma-flare-300);
  --cma-danger-soft: var(--cma-flare-900);
  --cma-required: var(--cma-danger);
  --cma-harbor-0: #ffffff;
  --cma-harbor-50: #f3f7fa;
  --cma-harbor-100: #e8eff3;
  --cma-harbor-150: #e0e8ed;
  --cma-harbor-200: #cfd9df;
  --cma-harbor-300: #b2c0c9;
  --cma-harbor-400: #9fb1bc;
  --cma-harbor-500: #768d9b;
  --cma-harbor-550: #607785;
  --cma-harbor-600: #566d7a;
  --cma-harbor-700: #415968;
  --cma-harbor-800: #2c4452;
  --cma-harbor-850: #293b45;
  --cma-harbor-875: #22333d;
  --cma-harbor-900: #17252d;
  --cma-harbor-950: #0f1a20;
  --cma-beacon-50: #eff6ff;
  --cma-beacon-100: #e0ecff;
  --cma-beacon-200: #c1d9ff;
  --cma-beacon-300: #95bcfb;
  --cma-beacon-400: #669bf1;
  --cma-beacon-500: #4282ee;
  --cma-beacon-600: #236ade;
  --cma-beacon-700: #1251b4;
  --cma-beacon-800: #0b3d8b;
  --cma-beacon-900: #0b2b5f;
  --cma-beacon-950: #091e40;
  --cma-beacon-875: #203351;
  --cma-daybreak-50: #e9f4fa;
  --cma-daybreak-500: #64b0dd;
  --cma-daybreak-900: #183645;
  --cma-deepwater: #003049;
  --cma-medallion-50: #f8f0e0;
  --cma-medallion-200: #ead2a4;
  --cma-medallion-700: #7a5a12;
  --cma-medallion-850: #3a3222;
  --cma-medallion-900: #2f2a1e;
  --cma-flare-50: #fcecef;
  --cma-flare-300: #ff8aa5;
  --cma-flare-600: #c0264b;
  --cma-flare-900: #3a1a24;
  --cma-blue: var(--cma-action);
  --cma-blue-ink: var(--cma-text-link);
  --cma-sky: var(--cma-action-secondary);
  --cma-navy: var(--cma-text-brand);
  --cma-ink: var(--cma-text-on-light);
  --cma-helpline-bg: var(--cma-band-helpline);
  --cma-border: var(--cma-line-card);
  --cma-field-border: var(--cma-line-field);
}
:root {
  --spacing-10: 8px; /* Gap between the meeting search field and button; Elementor widget spacing. */
  --spacing-20: 10px; /* Tiny: tight stacks inside a card. */
  --spacing-30: 16px; /* Card grid gap (category archives) and small section padding. */
  --cma-tile-pad-y: 20px; /* Top and bottom padding of a tile. */
  --cma-card-pad: 24px; /* Card padding and tile side padding (theme spacing-40). */
  --spacing-50: 40px; /* Group block top and bottom padding and column gap. Fluid on the site: 24px to 40px. */
  --spacing-60: 60px; /* Cover block top and bottom padding. Fluid on the site: 32px to 60px. */
  --spacing-70: 80px; /* Hero band padding. Fluid on the site: 48px to 80px. */
  --cma-radius: 4px; /* Cards, tiles, buttons, fields, code blocks: every CMA component. */
  --radius-button-theme: 6px; /* BuddyX theme buttons and form fields outside CMA classes. New work uses cma-radius. */
  --radius-theme: 8px; /* BuddyX global radius (theme panels, post-nav thumbnails). */
  --radius-round: 9999px; /* Avatars and the rounded site-logo style. */
  --cma-field-height: 48px; /* Minimum height of search inputs and their submit button (touch target). */
  --cma-accent-edge: 4px; /* Top edge width of an accent card. */
  --content-width: 840px; /* Reading column width (theme contentSize). */
  --wide-width: 1200px; /* Wide-aligned blocks (theme wideSize). */
  --container-width: 1300px; /* Boxed site container (Customizer). */
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Open Sans", system-ui, sans-serif;
  --font-nav: "IBM Plex Sans", system-ui, sans-serif;
  --text-h1: 600 34px/2 var(--font-sans); /* Page title. The theme capitalizes h1 to h4 with text-transform. */
  --text-h2: 600 27px/2 var(--font-sans); /* Section heading. */
  --text-h3: 600 23px/1.75 var(--font-heading); /* Card and panel heading. */
  --text-h4: 600 20px/1.75 var(--font-heading);
  --text-h5: 600 18px/1.25 var(--font-heading);
  --text-h6: 600 16px/1.25 var(--font-heading); /* Also footer column headings. */
  --text-body: 400 16px/1.65 var(--font-sans); /* All body copy, inputs and selects, in cma-text-body. */
  --text-card-title: 700 22px/1.3 var(--font-sans); /* Post titles on category archive cards. No text-transform. */
  --text-label: 600 15px/1.4 var(--font-sans); /* Form labels (meeting search). */
  --text-meta: 400 14px/1.5 var(--font-sans); /* Post dates and captions, in cma-text-meta. */
  --text-eyebrow: 600 13px/1.4 var(--font-sans); /* Uppercase label above a heading, in cma-text-link. The one approved eyebrow size (2026-10-26). */
  --text-nav: 400 18px/1.6 var(--font-nav); /* Main menu items, uppercase. */
  --text-subnav: 400 14px/1.6 var(--font-nav); /* Sub-menu items, capitalized. */
}
.h1 {
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 2;
  font-weight: 600;
  letter-spacing: 0;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 27px;
  line-height: 2;
  font-weight: 600;
  letter-spacing: 0;
}
.h3 {
  font-family: var(--font-heading);
  font-size: 23px;
  line-height: 1.75;
  font-weight: 600;
  letter-spacing: 0;
}
.h4 {
  font-family: var(--font-heading);
  font-size: 20px;
  line-height: 1.75;
  font-weight: 600;
  letter-spacing: 0;
}
.h5 {
  font-family: var(--font-heading);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}
.h6 {
  font-family: var(--font-heading);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: 0;
}
.card-title {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0;
}
.meta {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.nav {
  font-family: var(--font-nav);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}
.subnav {
  font-family: var(--font-nav);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0;
}