/* ============================================================================
   MA SOLUTIONS — COLORS & TYPE
   Foundation tokens for MA Financial Solutions & MA Care Solutions.
   Two brand identities on one system, switched via `.care` on a root element.
   Dark mode via `.dark`. Defaults to the Finance (navy/gold) identity.
   ----------------------------------------------------------------------------
   Fonts: Playfair Display (serif display) + Manrope (sans body/UI).
   Loaded from Google Fonts — see <link> in the component HTML or add:
   @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Manrope:wght@300;400;500;600;700&display=swap');
   ========================================================================== */

:root {
  /* ---- FINANCE IDENTITY (default) ------------------------------------- */
  --f-primary:   #0a2342;  /* deep navy — headlines, primary buttons, dark sections */
  --f-bg:        #f4f6fa;  /* light cool grey page background */
  --f-text:      #1c2430;  /* body copy */
  --f-accent:    #c9a961;  /* gold — labels, eyebrows, the logo dot, focus accent */
  --f-surface:   #ffffff;  /* cards, alt sections */
  --f-border:    #d6dce8;  /* hairline borders */
  --f-muted:     #5a6680;  /* secondary text */
  --f-dark-bg:   #081b33;  /* deepest navy — contact section */
  --f-tag-bg:    #e8ecf5;  /* chips, credential panel */

  /* ---- CARE IDENTITY (modern teal — replaces legacy green/terracotta) - */
  --c-primary:   #0d4f5c;  /* deep teal — headlines, primary buttons, dark sections */
  --c-bg:        #f0f7f7;  /* very light teal-white page background */
  --c-text:      #15282b;  /* body copy */
  --c-accent:    #16a394;  /* warm teal / cyan highlight — labels, logo dot, focus */
  --c-surface:   #ffffff;  /* cards, alt sections */
  --c-border:    #d3e4e3;  /* hairline borders */
  --c-muted:     #5a7173;  /* secondary text */
  --c-dark-bg:   #08363f;  /* deepest teal — contact section */
  --c-tag-bg:    #e2efee;  /* chips, credential panel */

  /* ---- ACTIVE SEMANTIC ALIASES (Finance bound by default) ------------- */
  --primary:  var(--f-primary);
  --heading:  var(--f-primary);  /* serif heading colour — lightens in dark mode */
  --bg:       var(--f-bg);
  --text:     var(--f-text);
  --accent:   var(--f-accent);
  --surface:  var(--f-surface);
  --border:   var(--f-border);
  --muted:    var(--f-muted);
  --dark-bg:  var(--f-dark-bg);
  --tag-bg:   var(--f-tag-bg);

  /* ---- TYPE ----------------------------------------------------------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Manrope', 'Helvetica Neue', system-ui, -apple-system, sans-serif;

  /* Display / heading scale (serif, clamp-based & fluid) */
  --t-hero:    clamp(2.2rem, 4.5vw, 3.8rem);  /* h1 / hero headline */
  --t-h2:      clamp(2rem, 4vw, 3rem);        /* section titles */
  --t-h3:      1.05rem;                        /* card titles */
  --t-stat:    2.5rem;                         /* serif stat numerals */

  /* Body / UI scale (sans) */
  --t-lead:    1.05rem;   /* intros, hero sub, about copy */
  --t-body:    0.9rem;    /* default UI / form text */
  --t-small:   0.86rem;   /* card descriptions */
  --t-label:   0.7rem;    /* uppercase eyebrows & section labels */
  --t-nav:     0.8rem;    /* nav links */

  /* Letter-spacing tokens (uppercase tracking is a signature) */
  --ls-label: 0.18em;     /* eyebrows / section labels */
  --ls-nav:   0.08em;     /* nav, buttons */
  --ls-tight: -0.5px;     /* the MA monogram */

  /* Weights */
  --w-light: 300;
  --w-reg:   400;
  --w-med:   500;
  --w-semi:  600;
  --w-bold:  700;

  /* Line heights */
  --lh-tight:   1.15;  /* display */
  --lh-heading: 1.2;
  --lh-body:    1.7;
  --lh-prose:   1.9;   /* about paragraphs */

  /* ---- LAYOUT / RADIUS / MOTION --------------------------------------- */
  --max-w:       1180px;
  --section-pad: clamp(4rem, 8vw, 8rem);
  --radius-sharp: 2px;   /* buttons, tags, inputs — the sharp default */
  --radius-card:  4px;   /* cards, panels, modal */
  --radius-pill:  6px;   /* the only "soft" radius: the mode toggle */
  --fade: 350ms ease;    /* brand-switch / theme cross-fade */
}

/* ---- DARK MODE (applies to both identities) ---------------------------
   The base palette tokens are overridden on the element carrying .dark.
   Because the FINANCE semantic aliases live on :root, they must be re-bound
   here too (the CARE aliases are already re-bound by .care, below). ------- */
.dark {
  --f-bg: #0d1520; --f-text: #e8edf5; --f-surface: #111e2e;
  --f-border: #1e3050; --f-muted: #8a9ab5; --f-tag-bg: #0f1e30; --f-dark-bg: #080f1a;

  /* Care dark — lifted off pure black for comfortable reading */
  --c-bg: #0e2125; --c-text: #e6f1f0; --c-surface: #143034;
  --c-border: #234547; --c-muted: #93b1b1; --c-tag-bg: #122b2e; --c-dark-bg: #0a1d20;
}
.dark:not(.care) {
  --bg: var(--f-bg); --text: var(--f-text); --surface: var(--f-surface);
  --border: var(--f-border); --muted: var(--f-muted); --dark-bg: var(--f-dark-bg);
  --tag-bg: var(--f-tag-bg); --primary: var(--f-primary); --accent: var(--f-accent);
  --heading: #eaf0f8;   /* light heading on dark navy */
}
.dark.care { --heading: #e8f3f2; }  /* light heading on dark teal */

/* ---- CARE BINDING — flip the active aliases to the teal palette ------- */
.care {
  --primary: var(--c-primary); --heading: var(--c-primary); --bg: var(--c-bg); --text: var(--c-text);
  --accent: var(--c-accent); --surface: var(--c-surface); --border: var(--c-border);
  --muted: var(--c-muted); --dark-bg: var(--c-dark-bg); --tag-bg: var(--c-tag-bg);
}

/* ============================================================================
   SEMANTIC TYPE CLASSES — apply directly or copy the declarations.
   ========================================================================== */
.ds-hero {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--t-hero); line-height: var(--lh-tight);
  color: var(--primary); text-wrap: pretty;
}
.ds-h2 {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--t-h2); line-height: var(--lh-heading); color: var(--primary);
}
.ds-h3 {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--t-h3); line-height: 1.3; color: var(--primary);
}
.ds-stat {
  font-family: var(--font-serif); font-weight: var(--w-bold);
  font-size: var(--t-stat); line-height: 1; color: var(--accent);
}
.ds-label {  /* eyebrows / section labels */
  font-family: var(--font-sans); font-weight: var(--w-bold);
  font-size: var(--t-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--accent);
}
.ds-lead {
  font-family: var(--font-sans); font-size: var(--t-lead);
  line-height: 1.85; color: var(--muted);
}
.ds-body {
  font-family: var(--font-sans); font-size: var(--t-body);
  line-height: var(--lh-body); color: var(--text);
}
.ds-small {
  font-family: var(--font-sans); font-size: var(--t-small);
  line-height: 1.6; color: var(--muted);
}
.ds-nav {  /* uppercase nav / button text */
  font-family: var(--font-sans); font-weight: var(--w-semi);
  font-size: var(--t-nav); letter-spacing: var(--ls-nav);
  text-transform: uppercase; color: var(--muted);
}