/* ============================================================================
   Central Valley SDP — Global Styles Foundation  (v1 · 2026-06-16)
   ----------------------------------------------------------------------------
   WHERE THIS GOES: Elementor → Custom Code  (Location: </body> — End, or
   Site Settings → Custom CSS). Wrap in <style>…</style> if using Custom Code.
   Fonts (Filson Pro, Mokoko) load via Elementor's Adobe Fonts integration —
   do NOT @import the Typekit kit here (it would double-load).
   Values trace to: Design System/Central Valley SDP Design System/tokens/*.
   Fluid clamp() sizing makes type + spacing scale smoothly across breakpoints.
   ============================================================================ */

:root{
  /* ---- Brand hues (base 500) ---- */
  --sdp-purple:#5A2F82; --sdp-green:#286F2E; --sdp-teal:#1C718B;
  --sdp-orange:#E66324; --sdp-yellow:#FAC056; --sdp-lime:#95C047;
  /* ---- Ramps: 050 / 100 / 700 ---- */
  --sdp-purple-050:#EFE8F6; --sdp-purple-100:#DFD0EC; --sdp-purple-700:#45235F;
  --sdp-green-050:#E6F1E5;  --sdp-green-100:#CFE6CE;  --sdp-green-700:#1E541F;
  --sdp-teal-050:#DEEEF2;   --sdp-teal-100:#C5E1E8;   --sdp-teal-700:#155A70;
  --sdp-orange-050:#FCE9DD; --sdp-orange-100:#F9D6C0; --sdp-orange-700:#C24F16;
  --sdp-yellow-050:#FEF3D9; --sdp-yellow-700:#A97400;
  --sdp-lime-050:#ECF4DC;   --sdp-lime-700:#5E7E1E;
  /* ---- Surfaces & ink ---- */
  --sdp-paper:#FAF8F5; --sdp-paper-cool:#F4F6F8; --sdp-paper-warm:#F3ECE2; --sdp-surface:#FFFFFF;
  --sdp-ink-deep:#2A1B3A; --sdp-ink:#1F1B24; --sdp-ink-2:#4A444F; --sdp-ink-3:#75707A;
  --sdp-line:#E6E1E9; --sdp-line-2:#D6CFDB;
  --sdp-on-dark:#FBF8F5; --sdp-on-dark-2:#C9BBD6;
  /* ---- Semantic aliases ---- */
  --sdp-text-strong:var(--sdp-purple); --sdp-text-body:var(--sdp-ink);
  --sdp-text-muted:var(--sdp-ink-2); --sdp-text-faint:var(--sdp-ink-3);
  --sdp-text-link:var(--sdp-teal); --sdp-text-link-hover:var(--sdp-teal-700);
  --sdp-surface-page:var(--sdp-paper); --sdp-surface-card:var(--sdp-surface);
  --sdp-surface-deep:var(--sdp-ink-deep);
  --sdp-action-bg:var(--sdp-orange); --sdp-action-bg-hover:var(--sdp-orange-700); --sdp-action-fg:#FFFFFF;
  --sdp-focus-ring:var(--sdp-teal);

  /* ---- Families (served by Elementor's Adobe Fonts integration) ---- */
  --sdp-font-sans:"Filson Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sdp-font-serif:"Mokoko",Georgia,"Times New Roman",serif;
  --sdp-font-indic:"Mukta","Filson Pro",system-ui,sans-serif;
  /* ---- Weights ---- */
  --sdp-fw-light:300; --sdp-fw-regular:400; --sdp-fw-med:500; --sdp-fw-semibold:600; --sdp-fw-bold:700;

  /* ---- Discrete type scale (px) ---- */
  --sdp-fs-12:12px; --sdp-fs-14:14px; --sdp-fs-16:16px; --sdp-fs-18:18px; --sdp-fs-20:20px;
  --sdp-fs-24:24px; --sdp-fs-32:32px; --sdp-fs-40:40px; --sdp-fs-52:52px; --sdp-fs-68:68px; --sdp-fs-88:88px;
  /* ---- Fluid display sizes (scale between mobile ↔ desktop) ---- */
  --sdp-fs-display: clamp(2.5rem, 1.30rem + 5.0vw, 5.5rem);   /*  40 → 88 */
  --sdp-fs-h1:      clamp(2.25rem,1.45rem + 3.4vw, 4.25rem);  /*  36 → 68 */
  --sdp-fs-h2:      clamp(2.0rem, 1.55rem + 1.9vw, 3.25rem);  /*  32 → 52 */
  --sdp-fs-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.5rem);   /*  24 → 40 */
  --sdp-fs-lede:    clamp(1.125rem,1.02rem + 0.45vw,1.5rem);  /*  18 → 24 */
  /* ---- Line height / tracking ---- */
  --sdp-lh-tight:1.08; --sdp-lh-snug:1.25; --sdp-lh-body:1.55; --sdp-lh-relaxed:1.7;
  --sdp-tr-display:-0.02em; --sdp-tr-tight:-0.01em; --sdp-tr-caps:0.12em;

  /* ---- 8-pt spacing ---- */
  --sdp-s-4:4px; --sdp-s-8:8px; --sdp-s-12:12px; --sdp-s-16:16px; --sdp-s-24:24px;
  --sdp-s-32:32px; --sdp-s-48:48px; --sdp-s-64:64px; --sdp-s-96:96px;
  --sdp-section-pad: clamp(1.5rem, 1.0rem + 4.5vw, 6rem);   /* 24 → 96 */
  --sdp-gutter:24px; --sdp-content-max:1200px;
  /* ---- Radii / borders / motion ---- */
  --sdp-r-sm:6px; --sdp-r-md:12px; --sdp-r-lg:20px; --sdp-r-xl:32px; --sdp-r-pill:999px;
  --sdp-border:1px; --sdp-stripe:5px; --sdp-focus-width:3px; --sdp-focus-offset:2px;
  --sdp-shadow-sm:0 1px 2px rgba(42,27,58,.06);
  --sdp-shadow-md:0 4px 16px rgba(42,27,58,.08),0 1px 3px rgba(42,27,58,.05);
  --sdp-shadow-lg:0 16px 40px rgba(42,27,58,.14),0 4px 12px rgba(42,27,58,.08);
  --sdp-ease:cubic-bezier(.2,.7,.2,1); --sdp-dur-fast:120ms; --sdp-dur-base:200ms; --sdp-dur-slow:360ms;
  --sdp-hover-lift:-2px;
  /* ---- Accessibility ---- */
  --sdp-a11y-tap-min:44px; --sdp-a11y-tap-comfortable:48px;
  --sdp-a11y-read-floor:18px; --sdp-a11y-read-measure:66ch; --sdp-a11y-focus-ring-dk:var(--sdp-yellow);
  /* ---- AI label (SB 942) ---- */
  --sdp-ai-label-bg:rgba(42,27,58,.82); --sdp-ai-label-fg:#FBF8F5;
}

/* ---- Base ---- */
body{ font-family:var(--sdp-font-sans); color:var(--sdp-text-body);
  background:var(--sdp-surface-page); font-size:var(--sdp-fs-18); line-height:var(--sdp-lh-body); }
:lang(pa){ font-family:var(--sdp-font-indic); }
a{ color:var(--sdp-text-link); }
a:hover{ color:var(--sdp-text-link-hover); }

/* Headings: display runs Light 300 — the brand signature */
h1,h2,h3,h4,h5,h6{ font-family:var(--sdp-font-sans); color:var(--sdp-text-strong); }
h1{ font-weight:var(--sdp-fw-light); font-size:var(--sdp-fs-h1);
    line-height:var(--sdp-lh-tight); letter-spacing:var(--sdp-tr-display); }
h2{ font-weight:var(--sdp-fw-light); font-size:var(--sdp-fs-h2);
    line-height:var(--sdp-lh-snug); letter-spacing:var(--sdp-tr-tight); }
h3{ font-weight:var(--sdp-fw-med); font-size:var(--sdp-fs-h3); line-height:var(--sdp-lh-snug); }
.sdp-display{ font-weight:var(--sdp-fw-light); font-size:var(--sdp-fs-display);
    line-height:var(--sdp-lh-tight); letter-spacing:var(--sdp-tr-display); }
.sdp-lede{ font-size:var(--sdp-fs-lede); line-height:var(--sdp-lh-snug); color:var(--sdp-text-muted); }

/* Eyebrow + Mokoko editorial accent */
.sdp-eyebrow{ font-weight:var(--sdp-fw-bold); font-size:var(--sdp-fs-14);
  text-transform:uppercase; letter-spacing:var(--sdp-tr-caps); line-height:1.2; color:var(--sdp-text-strong); }
.sdp-accent{ font-family:var(--sdp-font-serif); font-style:italic; font-weight:var(--sdp-fw-med); }

/* Layout helpers */
.sdp-section{ padding-block:var(--sdp-section-pad); }
.sdp-container{ max-width:var(--sdp-content-max); margin-inline:auto; padding-inline:var(--sdp-gutter); }
.sdp-read{ font-size:var(--sdp-a11y-read-floor); line-height:var(--sdp-lh-relaxed); max-width:var(--sdp-a11y-read-measure); }

/* Recurring card: white surface, hairline, 5px brand stripe */
.sdp-card{ background:var(--sdp-surface-card); border:var(--sdp-border) solid var(--sdp-line);
  border-left:var(--sdp-stripe) solid var(--sdp-purple); border-radius:var(--sdp-r-md);
  padding:var(--sdp-s-24) var(--sdp-s-32);
  transition:transform var(--sdp-dur-base) var(--sdp-ease), box-shadow var(--sdp-dur-base) var(--sdp-ease); }
.sdp-card:hover{ transform:translateY(var(--sdp-hover-lift)); box-shadow:var(--sdp-shadow-md); }
.sdp-card--green{ border-left-color:var(--sdp-green); }
.sdp-card--teal{ border-left-color:var(--sdp-teal); }
.sdp-card--orange{ border-left-color:var(--sdp-orange); }

/* Pill button — primary = orange (UI/large only), fg white */
.sdp-btn{ display:inline-flex; align-items:center; gap:var(--sdp-s-8);
  min-height:var(--sdp-a11y-tap-comfortable); padding:0 var(--sdp-s-24);
  border-radius:var(--sdp-r-pill); font-weight:var(--sdp-fw-semibold); font-size:var(--sdp-fs-16);
  text-decoration:none; border:2px solid transparent; cursor:pointer;
  transition:transform var(--sdp-dur-fast) var(--sdp-ease), background var(--sdp-dur-fast) var(--sdp-ease); }
.sdp-btn--primary{ background:var(--sdp-action-bg); color:var(--sdp-action-fg); }
.sdp-btn--primary:hover{ background:var(--sdp-action-bg-hover); transform:translateY(var(--sdp-hover-lift)); }
.sdp-btn--secondary{ background:var(--sdp-purple); color:#fff; }
.sdp-btn--ghost{ background:transparent; border-color:var(--sdp-line-2); color:var(--sdp-text-strong); }

/* ---- Plain-Language ⇄ fuller register toggle (content axis, NOT a language) ----
   Author both layers in the page; default shows Plain Language.
   Mark blocks .reg-plain / .reg-full; <html class="sdp-reg-full"> reveals the fuller layer.
   TranslatePress still translates both layers (both stay in the DOM). */
.reg-full{ display:none; }
html.sdp-reg-full .reg-plain{ display:none; }
html.sdp-reg-full .reg-full{ display:revert; }
.sdp-reg-toggle{ display:inline-flex; gap:2px; background:var(--sdp-purple-050); border-radius:var(--sdp-r-pill); padding:3px; }
.sdp-reg-toggle button{ min-height:var(--sdp-a11y-tap-min); padding:0 var(--sdp-s-16); border:0; background:transparent;
  border-radius:var(--sdp-r-pill); font-weight:var(--sdp-fw-semibold); font-size:var(--sdp-fs-14); color:var(--sdp-text-strong); cursor:pointer; }
.sdp-reg-toggle button[aria-pressed="true"]{ background:var(--sdp-surface); box-shadow:var(--sdp-shadow-sm); }

/* AI content label (SB 942 manifest badge) */
.sdp-ai-label{ position:absolute; inset:auto auto var(--sdp-s-12) var(--sdp-s-12);
  display:inline-flex; align-items:center; gap:6px; background:var(--sdp-ai-label-bg); color:var(--sdp-ai-label-fg);
  font-size:var(--sdp-fs-12); padding:6px 12px; border-radius:var(--sdp-r-pill); }

/* ---- Global a11y safety nets (mirror tokens/compliance.css) ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:var(--sdp-focus-width) solid var(--sdp-focus-ring); outline-offset:var(--sdp-focus-offset); border-radius:var(--sdp-r-sm); }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important;
    transition-duration:.01ms!important; scroll-behavior:auto!important; } }
.sdp-sr-only{ position:absolute!important; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }