/* ============================================================
   MA Fundraising Toolkit. V03 Design Tokens (COMPLETE union, 2026-06-15).
   Source of truth: this file (01. Design/design-tokens.css). The theme copy
   (04. Theme/salient-child-v03-assets/assets/css/design-tokens.css) is
   regenerated from this; keep the two identical. Colours sampled pixel-accurate
   from the approved comps; fonts confirmed via pdffonts. Serif (2026-06-06):
   the approved pack's trial Canela/Domaine are replaced by PLAYFAIR DISPLAY
   (Google OFL, self-hosted); sans = Montserrat + Poppins. Load once in
   salient-child head before fonts.css; everything scopes under .ma-toolkit.
   ============================================================ */

:root {
  /* ---- Brand colour (sampled from approved comps) ---- */
  --ma-navy:        #232C65;  /* primary / headings / sidebar / table rows */
  --ma-crimson:     #DE1E38;  /* accent / CTAs / stat figures / active state */
  --ma-purple:      #8A8FAB;  /* testimonial band (periwinkle) */
  --ma-panel:       #F2F2F2;  /* soft section background */
  --ma-ink:         #3A3A3A;  /* body copy */
  --ma-rule:        #D8DCE3;  /* hairlines / borders */
  --ma-bg:          #FFFFFF;  /* page / card surface */

  /* ---- Derived tints + component values ---- */
  --ma-navy-085:    #3A4170;  /* lighter navy (hover) */
  --ma-crimson-085: #C11B31;  /* crimson hover (darker) */
  --ma-panel-line:  #E7E9EF;  /* panel divider */
  --ma-ink-deep:    #0B1220;  /* dense table text (Investors comp, audit D1) */
  --ma-active-fill: #D9D9DB;  /* active sidebar item fill (audit D4; supersedes #D9DBE0) */
  --ma-az-band:     #EBECF1;  /* A-Z webinar dropdown band = navy #232C65 @ 9% flattened on white */
  --ma-tier-paid:   #5CB85C;  /* Templates "Paid" tier pill outline (comp 06_8); a11y: darken pill TEXT to ~#2E7D32 for AA */

  /* ---- Building Your Business category accents (sampled from comps 05_1..5, 2026-06-16) ---- */
  --ma-byb-basics:    #B42448;  /* Business Basics wash (crimson family); pair w/ dark stop #8A1838 */
  --ma-byb-basics-d:  #8A1838;
  --ma-byb-culture:   #34499E;  /* Building Culture & Hiring wash (royal blue); dark stop #25336F */
  --ma-byb-culture-d: #25336F;
  --ma-byb-role:      #4E6E8C;  /* Your Role wash (slate blue); dark stop #38506A */
  --ma-byb-role-d:    #38506A;

  /* ---- Type families ---- */
  --ma-font-sans:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ma-font-sans-2:  "Poppins", var(--ma-font-sans);  /* Investors table / dense UI */
  --ma-font-serif:   "Playfair Display", Georgia, "Times New Roman", serif;
  --ma-font-display: "Playfair Display", Georgia, serif;

  /* ---- Type scale (fluid) ---- */
  --ma-h1:   clamp(2rem, 1.40rem + 2.4vw, 3rem);      /* 32 -> 48 */
  --ma-h2:   clamp(1.5rem, 1.20rem + 1.2vw, 2rem);    /* 24 -> 32 */
  --ma-h3:   1.375rem;                                 /* 22 */
  --ma-h4:   1.125rem;                                 /* 18 */
  --ma-body: 1rem;                                      /* 16 / 1.5 */
  --ma-meta: 0.8125rem;                                 /* 13 */
  --ma-lh-body: 1.5;
  --ma-lh-head: 1.15;

  /* ---- Surface / layout ---- */
  --ma-radius:       16px;
  --ma-radius-input: 8px;                                /* form fields */
  --ma-radius-pill:  999px;
  --ma-shadow:       0 8px 24px rgba(35, 44, 101, 0.10); /* soft navy */
  --ma-sidebar-w:    212px;                               /* comp-sampled (was 240) */
  --ma-appbar-h:     80px;                                /* chassis app-bar height */
  --ma-maxw:         1200px;
  --ma-gap:          24px;

  /* ---- Spacing (8px scale) ---- */
  --ma-space-1: 4px;  --ma-space-2: 8px;  --ma-space-3: 12px; --ma-space-4: 16px;
  --ma-space-5: 24px; --ma-space-6: 32px; --ma-space-7: 48px; --ma-space-8: 64px;
  --ma-space-9: 96px; --ma-space-section: 120px;

  /* ---- Motion (Interaction Spec section 15) ---- */
  --ma-dur-fast: 120ms; --ma-dur-base: 220ms; --ma-dur-slow: 360ms;
  --ma-ease-standard: cubic-bezier(.2,0,.2,1);
  --ma-ease-exit:     cubic-bezier(.4,0,1,1);
  --ma-ease-emphasis: cubic-bezier(.2,0,0,1);

  /* ---- Z-index ---- */
  --ma-z-base: 0; --ma-z-dropdown: 100; --ma-z-sticky-header: 200;
  --ma-z-drawer: 300; --ma-z-overlay: 400; --ma-z-modal: 500; --ma-z-toast: 600;
}

/* @font-face declarations live in fonts.css (self-hosted WOFF2, font-display: swap):
   Montserrat 300/400/500/600/700 + 400i, Poppins 300/400, Playfair Display 500/600 + 500i/600i. */