@charset "UTF-8";
/* ==========================================================================
   Citizens' Climate Lobby - Design Tokens
   Source: Figma "Components.fig" (Overview / Type-Color, Spacing, Buttons)
   ========================================================================== */

/* Ubuntu is loaded at 400 / 500 / 700 only — there is no 600 face.
   --fw-strong-heading is therefore 700 (not 600); see D0 in DEVIATIONS.
   If you need Semi-Bold parity with the original Figma, also include 600
   here and change --fw-strong-heading below back to 600. */
/* Source Sans 3 is the modernized successor to Source Sans Pro on Google
   Fonts (same designer, updated metrics). It's listed first in --font-body
   below, with 'Source Sans Pro' kept as a fallback so that if the original
   .ttf/.otf files are installed locally (e.g. for print parity work) they
   take precedence over the CDN version. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Roboto:wght@400;500;700&family=Shadows+Into+Light+Two&display=swap');

:root {
  /* =========================================================
     BRAND - Green ramp (Primary)
     ========================================================= */
  --brand-darkest: #2A3314;   /* Primary - Darkest */
  --brand-dark:    #5A7931;   /* Primary - Dark */
  --brand:         #9BC23B;   /* Primary */
  --brand-medium:  #C2D96C;   /* Primary - Medium */
  --brand-light:   #D5E5AC;   /* Primary - Light */
  --brand-lightest:#EBF4DB;   /* Primary - Lightest */

  /* =========================================================
     UTILITY
     ========================================================= */
  --util-alert-red:       #D71F26;
  --util-alert-red-light: #F9B9BA;
  --util-success:         #87AD5A;

  /* =========================================================
     SPECIALTY - C-Decorative
     ========================================================= */
  --c-dec-1: #15527B;   /* Decorative 1 - deep blue (CCL Dark Blue) */
  --c-dec-2: #0081C7;   /* Decorative 2 - CCL Blue */
  --c-dec-3: #99DBF9;   /* Decorative 3 - pale sky */
  --c-dec-4: #ECF0F3;   /* Decorative 4 - pale neutral */

  /* =========================================================
     GREYSCALE (Neutrals)
     ========================================================= */
  --grey-1000: #000000;
  --grey-600:  #333333;
  --grey-500:  #474748;
  --grey-400:  #7A787A;
  --grey-300:  #A7A8AA;
  --grey-200:  #ECF0F3;
  --grey-100:  #F4F7F9;
  --grey-0:    #FFFFFF;

  /* =========================================================
     LEGACY ALIASES (kept so existing components keep working)
     ========================================================= */
  --ccl-blue:         var(--c-dec-2);
  --ccl-blue-dark:    var(--c-dec-1);
  --ccl-blue-bg:      #E8F3F9;
  --ccl-blue-pressed: var(--grey-500);

  --ccl-green:         var(--brand);
  --ccl-green-dark:    var(--brand-dark);
  --ccl-green-pressed: var(--brand-light);
  --ccl-green-bg:      var(--brand-lightest);

  --ccl-alert-red:       var(--util-alert-red);
  --ccl-alert-red-light: var(--util-alert-red-light);
  --ccl-alert-red-bg:    #FDEEED;
  --ccl-alert-dark-red:  #90251B;

  --ccl-sky:          var(--c-dec-3);
  --ccl-teal-bg:      #E9F4F6;
  --ccl-navy:         var(--c-dec-1);
  --ccl-purple:       #46296B;
  --ccl-purple-light: #D9C9E3;
  --ccl-purple-bg:    #EEEAEF;

  --ccl-grey-100: var(--grey-500);
  --ccl-grey-90:  var(--grey-500);
  --ccl-grey-80:  var(--grey-400);
  --ccl-grey-70:  var(--grey-300);
  --ccl-grey-50:  var(--grey-300);
  --ccl-grey-30:  var(--grey-200);
  --ccl-grey-10:  var(--grey-100);
  --ccl-grey-0:   var(--grey-0);

  /* =========================================================
     INITIALS PALETTE — six earthy, equal-weight tints for
     hashing user names to backgrounds in lists of people
     (member directory, mention picker, chat threads).
     All six pass AA with white text. NOT for general UI use:
     these are people-colors, not brand colors. For solo /
     hero avatars (current user, byline) use --ccl-blue or
     the --gradient-blue-green.
     ========================================================= */
  --avatar-initials-1: #4A6E8A;  /* Steel  */
  --avatar-initials-2: #5F6E3F;  /* Sage   */
  --avatar-initials-3: #A05A3F;  /* Clay   */
  --avatar-initials-4: #6B4263;  /* Plum   */
  --avatar-initials-5: #8A6628;  /* Ochre  */
  --avatar-initials-6: #3F7373;  /* Teal   */

  --ccl-black:      var(--grey-1000);
  --ccl-text:       var(--grey-600);
  --ccl-text-muted: #444444;
  --ccl-text-help:  var(--grey-500);

  /* -------- SEMANTIC (map roles -> colors) -------- */
  --fg1: var(--grey-500);
  --fg2: var(--grey-600);
  --fg3: #444444;
  --fg-muted: var(--grey-400);
  --fg-inverse: var(--grey-0);
  --fg-link: var(--c-dec-2);
  --fg-link-strong: #1A74A8;   /* Darker link variant for hover-prone surfaces and dense lists */
  --quote-teal: #5BA3B0;       /* Brand teal used for the pull-quote glyph (assets/brand/marks/quote.svg) */
  --quote-surface-bg: #fff;    /* Background the pull-quote's icon + author "punch through" — set on any parent that isn't white (e.g. a grey-100 panel sets it to var(--grey-100)) so the gradient borders read correctly */
  --fg-error: var(--util-alert-red);

  --bg-page: var(--grey-0);
  --bg-subtle: var(--grey-100);
  --bg-panel: var(--grey-200);
  --bg-info: #E8F3F9;
  --bg-success: var(--brand-lightest);
  --bg-error: #FDEEED;
  --bg-header: var(--c-dec-2);

  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-input:  var(--grey-400);

  /* =========================================================
     GRADIENTS - use tastefully; background or accent only.
     All linear, 135deg (top-left -> bottom-right).
     ========================================================= */
  --light-blue: #1FB3E1;
  --gradient-blue-green: linear-gradient(135deg, #0081C7 0%, #9BC23B 100%);  /* Highlighted text / underlines */
  --gradient-light-blue: linear-gradient(135deg, #0081C7 0%, #1FB3E1 100%);  /* Background color */
  --gradient-dark-blue:  linear-gradient(135deg, #15527B 0%, #0081C7 100%);  /* Background color */
  /* Horizontal blue→green for thin gradient strokes — active-tab
     underlines, label accents, section-divider rules. Distinct from
     --gradient-blue-green (135deg, for full-bleed surfaces). Direction
     is locked to blue→green everywhere per design call (Jun 2026). */
  --gradient-underline:  linear-gradient(90deg,  #0081C7 0%, #9BC23B 100%);

  /* -------- SPACING (tokens from Spacing page) -------- */
  --spacing-2xs: 4px;
  --spacing-xs:  8px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;
  --spacing-7xl: 160px;

  /* Page-edge insets. Two tokens because two distinct patterns exist:
     - --page-gutter: full-width sections that own the viewport edge
       (hero, mobilized, team-cards, footer, etc.) — generous on desktop.
     - --container-pad: max-width centered containers (section-header,
       pillar-row, .container utilities) — tight interior breathing room
       on desktop since max-width already handles the outer alignment.
     Both converge to --spacing-lg below 900px so every page-edge content
     line shares one mobile inset (see @media block at end of file). */
  --frame-max:     1440px;               /* content frame; backgrounds bleed past it */
  --gutter:        var(--spacing-4xl);   /* fixed inner side padding (64 desktop, 24 mobile) — for max-width centered containers */
  /* Extra inset that centers a --frame-max frame; 0 at or below the frame,
     grows with the viewport beyond it. Uses 100% (containing block), so it
     only activates for full-width sections and falls back to 0 in narrower
     contexts — no 100vw / scrollbar hazard. */
  --edge-inset:    max(0px, calc((100% - var(--frame-max)) / 2));
  /* Full-width sections: background spans the viewport edge, content stays
     centered in the frame with --gutter of breathing room. */
  --page-gutter:   calc(var(--edge-inset) + var(--gutter));
  --container-pad: var(--spacing-md);    /* 16px desktop, 24px mobile */

  /* -------- RADII --------
     4px inputs/accordion rows · 8px chips + small tiles · 16px cards
     · 20px hero/modal-scale surfaces · pill on ACTIONS (buttons, nav,
     tag chips) + avatars. Ramp runs xs 4 -> sm 8 -> md 16 -> lg 20 -> pill. */
  --radius-xs: 4px;      /* Inputs, accordion rows, small static surfaces */
  --radius-sm: 8px;      /* Metadata chips, pillar tiles, small feature cards */
  --radius-md: 16px;     /* Cards, feature tiles, standard panels */
  --radius-lg: 20px;     /* Anything larger than a card — modals, hero blocks, CTA banners, media wells */
  --radius-pill: 999px;  /* Actions: buttons, nav pills, tag chips; also avatars */

  /* -------- SHADOWS -------- */
  /* Two-tier shadow system (Jun 2026). Soft, minimal-offset.
     --shadow-card: resting surfaces (cards, tiles, panels, accordions) —
       pair with a 1px rgba(0,0,0,.10) hairline so the edge holds on white.
     --shadow-elevated: lifted surfaces (modals, popovers, dropdowns,
       floating chips) — brand-navy tint, no border needed. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.07), 0 3px 8px rgba(0,0,0,0.06);
  --shadow-elevated: 0 2px 8px rgba(22,50,92,0.10), 0 8px 24px rgba(22,50,92,0.14);
  --shadow-subtle: 0 2px 4px #D8DDE6;

  /* -------- TYPOGRAPHY --------
     Font families:
       Heading body: Ubuntu
       Body:         Source Sans Pro
     Weights:
       Strong Heading: 600 (Semi-Bold)
       Weak:           400 (Regular)
       Strong Body:    700 (Bold)

     Role-based scale. Values are desktop; mobile overrides below via @media. */
  --font-display: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;   /* Headings, buttons */
  --font-body: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Roboto', system-ui, sans-serif;                    /* Legacy UI labels */
  --font-hand: 'Shadows Into Light Two', 'Comic Sans MS', cursive; /* Handwritten accent numerals */

  /* Role tokens (desktop) */
  --fs-display:   56px; --lh-display:  64px;
  --fs-h1:        40px; --lh-h1:       48px;
  --fs-h2:        32px; --lh-h2:       40px;
  --fs-h3:        24px; --lh-h3:       32px;
  --fs-h4:        20px; --lh-h4:       28px;
  --fs-small:     18px; --lh-small:    28px;
  --fs-tiny:      14px; --lh-tiny:     20px;
  --fs-uppercase: 14px; --lh-uppercase:20px;

  /* Ubuntu Semi-Bold (600) is NOT in the @import above — strong-heading is 700.
     See DEVIATIONS · D0 for why. Keeping this token name ("strong-heading")
     so consumers don't have to change — only the value moved. */
  --fw-strong-heading: 700;  /* Bold */
  --fw-weak:           400;  /* Regular   */
  --fw-strong-body:    700;  /* Bold      */

  /* Legacy numeric aliases — kept so existing components keep working. */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;   /* = tiny */
  --text-md:   16px;   /* = small / body */
  --text-lg:   18px;
  --text-xl:   20px;   /* = h4 */
  --text-2xl:  24px;   /* = h3 */
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-hero: 56px;   /* = display desktop */

  --leading-tight: 1.0;
  --leading-snug: 1.15;
  --leading-body: 1.44;  /* 23/16 */
  --leading-roomy: 1.6;
}

/* =========================================================
   Semantic element styles — scope under a `.ccl` wrapper.

   All element selectors below are wrapped in :where() so they
   contribute ZERO specificity. That means component classes
   like `.person__name { margin: 0 }` win against the base
   `h3` defaults without needing !important.  Base rules still
   apply as a fallback anywhere a component class doesn't.
   See STYLING-PRINCIPLES.md § 2.
   ========================================================= */
:where(.ccl), :where(.ccl) * { box-sizing: border-box; }

.ccl {
  font-family: var(--font-body);
  color: var(--fg2);
  background: var(--bg-page);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

:where(.ccl) h1, .ccl .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h1);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
  color: var(--ccl-black);
  letter-spacing: 0.01em;
  margin: 0 0 var(--spacing-md);
}
:where(.ccl) h2, .ccl .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-weak);
  font-size: var(--fs-h2);
  line-height: calc(var(--lh-h2) / var(--fs-h2));
  color: var(--fg2);
  margin: 0 0 var(--spacing-md);
}
:where(.ccl) h3, .ccl .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h3);
  line-height: calc(var(--lh-h3) / var(--fs-h3));
  color: var(--fg2);
  margin: 0 0 var(--spacing-sm);
}
:where(.ccl) h4, .ccl .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h4);
  line-height: calc(var(--lh-h4) / var(--fs-h4));
  color: var(--fg1);
  margin: 0 0 var(--spacing-xs);
}
.ccl .display, .ccl .t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-display);
  line-height: calc(var(--lh-display) / var(--fs-display));
  color: var(--ccl-black);
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-md);
}
:where(.ccl) p { margin: 0 0 var(--spacing-md); font-size: var(--fs-small); line-height: calc(var(--lh-small) / var(--fs-small)); letter-spacing: 0.01em; }

/* `<figure>` defaults to margin: 1em 40px in browsers — reset so
   grid/flex layouts using figures (pull-quotes, captioned media,
   image-mosaic items) align without per-component overrides. */
:where(.ccl) figure { margin: 0; }
:where(.ccl) blockquote { margin: 0; }
.ccl .t-small { font-size: var(--fs-small); line-height: calc(var(--lh-small) / var(--fs-small)); }
.ccl .t-tiny, :where(.ccl) small, .ccl .help { font-size: var(--fs-tiny); line-height: calc(var(--lh-tiny) / var(--fs-tiny)); color: var(--fg1); letter-spacing: 0.01em; }
.ccl .t-uppercase { font-family: var(--font-body); font-weight: var(--fw-strong-body); font-size: var(--fs-uppercase); line-height: calc(var(--lh-uppercase) / var(--fs-uppercase)); letter-spacing: 0.12em; text-transform: uppercase; }
.ccl .error-text { font-size: var(--fs-tiny); color: var(--fg-error); }
.ccl .field-label { font-family: var(--font-display); font-weight: var(--fw-strong-body); font-size: var(--fs-small); color: var(--fg1); }
:where(.ccl) a, .ccl .link { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease; }
:where(.ccl) a:hover, .ccl .link:hover { border-bottom-color: var(--fg-link); }
/* Prose links — an unclassed <a> inside a paragraph. CCL's long-standing
   convention, and the numbers back it: --ccl-navy is 8.32:1 on white, 7.73:1
   on grey-100 and 7.37:1 on the blue-bg tint, so it clears AA with headroom on
   every surface the site actually uses. (--fg-link-strong only scrapes past on
   the tint at 4.53:1, and the old --fg-link failed AA on plain white at 4.23.)

   Underline is REQUIRED here, not decoration: navy against #333 body copy is
   1.52:1, so colour alone would make a link near-invisible. That's the trade
   the navy makes — maximum contrast against the background, almost none
   against the text — and the underline is what pays for it. Bold reinforces
   the same signal for low-vision readers.

   border-bottom is suppressed so hover thickens the existing underline rather
   than drawing a second line beneath it — that doubling is what hand-rolled
   `style="text-decoration: underline"` links used to produce.

   Classed links (.read-more, .btn, .tag, cards) are untouched. `p > a` is
   deliberately narrow: nav, footer, breadcrumb and the language switcher all
   use unclassed <a> inside <li>, and none of them should pick this up. */
:where(.ccl) p > a:not([class]) {
  color: var(--ccl-navy);
  font-weight: var(--fw-strong-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  border-bottom: 0;
}
:where(.ccl) p > a:not([class]):hover {
  color: var(--ccl-blue);
  text-decoration-thickness: 2px;
}
.ccl .disabled, .ccl [disabled] { color: var(--ccl-grey-70); }
.ccl .page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h1);
  color: var(--ccl-blue);
  line-height: calc(var(--lh-h1) / var(--fs-h1));
}
.ccl .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

/* In-page eyebrows — sit above an H1/H2/Display. Blue answers "Where am I?";
   green answers "What is this?". Tighter tracking than the legacy `.eyebrow`
   chip; uses Ubuntu so it sits in the heading family.

   THREE ROLES — see preview/eyebrows.html for the full guide:
     .eyebrow-blue  Site-structural wayfinding ("OUR IMPACT", "POLICY WINS")
                    Names the visitor's current location — it matches an item
                    in the site navigation (a top-level nav entry, or the
                    sub-page within it, e.g. "Policy Wins" under Our Impact).
                    Used at most once or twice per page: at the top of the
                    hero, and again in a later band if the reader has scrolled
                    far enough to need re-anchoring.
     .eyebrow-green Block-level content type ("OUR MISSION", "OUR VALUES")
                    May repeat down a page; one per block. Says
                    "this is a values block, this is a story block".
     .eyebrow-meta  Timeline / metadata label ("2026 – PRESENT", "MARCH 2025")
                    Repeats freely inside lists of equivalent items.
                    Lighter weight + tighter tracking so a stack of
                    dates reads as a calm rhythm, not a chorus of
                    section starts. */
.ccl .eyebrow-blue,
.ccl .eyebrow-green,
.ccl .eyebrow-meta {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h4);
  line-height: calc(var(--lh-h4) / var(--fs-h4));
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-sm);
  display: block;
}
.ccl .eyebrow-blue  { color: var(--ccl-blue); }
.ccl .eyebrow-green { color: var(--ccl-green-dark); }
.ccl .eyebrow-meta  {
  color: var(--ccl-blue);
  font-weight: var(--fw-weak);
  font-size: var(--fs-tiny);
  line-height: calc(var(--lh-tiny) / var(--fs-tiny));
  letter-spacing: 0.14em;
}

/* ------- Buttons ------- */
.ccl .btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: 1;
  padding: 11px 18px;
  /* Pill = action. See DESIGN-SYSTEM-FEEDBACK.md §9 — fully rounded means
     "this does something": buttons, nav pills, tag chips. Static surfaces
     (cards, inputs, chips, accordion rows) stay rectangular. */
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 133px;
  white-space: nowrap;
}
/* Long labels ("Browse all People of the Global Majority") otherwise hold
   their single line and push the whole page into horizontal scroll on
   phones. padding-block 9 + line-height 1.2 keeps a single-line button at
   exactly the same 40px it renders at desktop (9 + 21.6 + 9 ≈ min-height);
   only genuinely-wrapping labels get taller. */
@media (max-width: 600px) {
  .ccl .btn {
    white-space: normal;
    line-height: 1.2;
    padding-block: 9px;
    text-align: center;
  }
}
.ccl .btn-primary {
  background: var(--ccl-green);
  color: var(--ccl-black);
  border-color: var(--ccl-green);
  font-weight: 600; /* a touch heavier on CCL-green to maintain perceived weight with black ink */
}
.ccl .btn-primary:hover { background: var(--ccl-green-dark); border-color: var(--ccl-green-dark); color: #fff; }
.ccl .btn-primary:active,
.ccl .btn-primary.pressed { background: var(--ccl-green-pressed); border-color: var(--ccl-green-pressed); color: var(--ccl-black); }
.ccl .btn-primary[disabled] { background: var(--ccl-grey-50); border-color: var(--ccl-grey-50); color: var(--ccl-grey-80); cursor: not-allowed; }

/* Secondary — solid charcoal fill, white text. High-contrast alt to primary. */
.ccl .btn-secondary {
  background: #2A2A2B;
  color: #fff;
  border-color: #2A2A2B;
}
.ccl .btn-secondary:hover { background: #000; border-color: #000; color: #fff; }
.ccl .btn-secondary:active,
.ccl .btn-secondary.pressed { background: #474748; border-color: #474748; color: #fff; }
.ccl .btn-secondary[disabled] { background: var(--ccl-green-pressed); border-color: var(--ccl-green-pressed); color: rgba(0,0,0,0.35); cursor: not-allowed; }

/* Tertiary — outlined button with dark ink. Sits below primary/secondary. */
.ccl .btn-tertiary {
  background: transparent;
  color: var(--ccl-black);
  border-color: var(--ccl-black);
}
.ccl .btn-tertiary:hover { background: var(--ccl-grey-10); color: var(--ccl-black); border-color: var(--ccl-black); }
.ccl .btn-tertiary:active,
.ccl .btn-tertiary.pressed { background: var(--ccl-grey-30); border-color: var(--ccl-black); color: var(--ccl-black); }
.ccl .btn-tertiary[disabled] { background: var(--ccl-grey-30); border-color: var(--ccl-grey-30); color: var(--ccl-grey-70); cursor: not-allowed; }

/* Low emphasis — light outline, dark ink. Use when a tertiary would feel too heavy. */
.ccl .btn-low {
  background: transparent;
  color: var(--ccl-text);
  border-color: var(--ccl-grey-50);
  border-width: 1px;
  padding: 12px 18px; /* +1 each side to keep same total height with 1px border */
}
.ccl .btn-low:hover { background: var(--ccl-grey-10); border-color: var(--ccl-grey-70); color: var(--ccl-text); }
.ccl .btn-low:active,
.ccl .btn-low.pressed { background: var(--ccl-grey-30); border-color: var(--ccl-grey-70); }
.ccl .btn-low[disabled] { border-color: var(--ccl-grey-30); color: var(--ccl-grey-70); cursor: not-allowed; }

/* Destructive — red outline + red ink. Confirmations for deletion / irreversible actions. */
.ccl .btn-danger {
  background: transparent;
  color: var(--ccl-alert-red);
  border-color: var(--ccl-alert-red);
}
.ccl .btn-danger:hover { background: var(--ccl-alert-red-bg); color: var(--ccl-alert-dark-red); border-color: var(--ccl-alert-dark-red); }
.ccl .btn-danger:active,
.ccl .btn-danger.pressed { background: var(--ccl-alert-red-light); color: var(--ccl-alert-dark-red); border-color: var(--ccl-alert-dark-red); }
.ccl .btn-danger[disabled] { border-color: var(--ccl-grey-50); color: var(--ccl-grey-70); cursor: not-allowed; }

/* Ghost on dark — translucent white fill, white ink. Use ONLY on
   dark backgrounds (navy CTA banners, dark hero scrim, dark gradient
   panels). On light backgrounds use .btn-tertiary or .btn-low instead. */
.ccl .btn-ghost-on-dark {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(2px);
}
.ccl .btn-ghost-on-dark:hover  { background: rgba(255, 255, 255, 0.3);  border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.ccl .btn-ghost-on-dark:active,
.ccl .btn-ghost-on-dark.pressed { background: rgba(255, 255, 255, 0.45); border-color: #fff; color: var(--ccl-black); }
.ccl .btn-ghost-on-dark[disabled] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.5); cursor: not-allowed; }

/* ------- Inputs ------- */
.ccl .input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-input);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--fg2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ccl .input:focus { outline: none; border-color: var(--ccl-blue); box-shadow: 0 0 0 3px rgba(0,129,199,0.2); }
.ccl .input[aria-invalid="true"] { border-color: var(--ccl-alert-red); }

/* ------- Cards ------- */
.ccl .card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
}

/* ------- Feedback banners ------- */
.ccl .banner {
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  border-left: 4px solid;
  font-size: var(--text-md);
}
.ccl .banner-info { background: var(--bg-info); border-color: var(--ccl-blue); color: var(--ccl-blue-dark); }
.ccl .banner-success { background: var(--bg-success); border-color: var(--ccl-green-dark); color: var(--ccl-green-dark); }
.ccl .banner-error { background: var(--bg-error); border-color: var(--ccl-alert-red); color: var(--ccl-alert-dark-red); }

/* -------- Responsive type (mobile) --------
   Below 768px, reduce headline roles per the spec.
   Heading 3, Heading 4, Small, Tiny, Uppercase are identical on both
   breakpoints so they are not overridden here. */
@media (max-width: 767px) {
  :root {
    --fs-display: 40px; --lh-display: 48px;
    --fs-h1:      36px; --lh-h1:      44px;
    --fs-h2:      28px; --lh-h2:      36px;
    /* h3, h4, small, tiny, uppercase unchanged */
  }
}

/* Page-edge inset collapse — same breakpoint as the layout reflow in
   site.css (multi-column grids collapse to single column at 900px), so
   the gutter and the column count flip together. Both tokens converge
   here so full-width sections and centered max-width containers line up
   along the same vertical at mobile. */
@media (max-width: 900px) {
  :root {
    --gutter:        var(--spacing-lg);    /* 64px → 24px (--page-gutter derives from it) */
    --container-pad: var(--spacing-lg);    /* 16px → 24px */
  }
}