/* ============================================================
   LIGAZON Alliance — Colors & Type
   ------------------------------------------------------------
   LIGAZON is the sovereign umbrella convening California's Black
   and Latino healthcare leaders around the Health & Prosperity
   Covenant — a document a California Governor will be asked to
   countersign. The system needs gravity, dignity, and visible
   representation of the coalition behind it.

   The Coalition palette: midnight ink, warm clay (terracotta —
   Latino warmth, advocacy urgency), saffron gold (dignity, Pan-
   African + Latino flag echo), and deep moss green (Salud, civic
   trust). Cream paper replaces pure white so long-form documents
   feel like vellum, not a screen. Violet is retained only as a
   legacy accent for downstream pages still inheriting from the
   SaludConTech entrepreneurship-arm surface.
   ============================================================ */

/* Fonts loaded from Google Fonts (placeholder substitute — the
   sandbox blocked direct font-file imports during build). Replace
   with self-hosted TTFs in /fonts/ when available. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- COALITION PALETTE (primary, Covenant-grade) ---------- */
  /* Ink — deep forest greens; warm dark surfaces, less black than midnight */
  --ink-950: #0C1F16;
  --ink-900: #163528;
  --ink-800: #1F4636;
  --ink-700: #2D5C48;
  --ink-600: #426E58;

  /* Paper — warm cream, never pure white. Long-form reading. */
  --paper-50:  #FBF7EE;
  --paper-100: #F5EDDE;
  --paper-200: #ECE0C9;
  --paper-300: #DBC9A6;

  /* Clay — terracotta red. Action, urgency, Latino heritage warmth.
     This is the "Color of Change" energy — recoded for healthcare. */
  --clay-50:  #FBEFE9;
  --clay-100: #F4D4C5;
  --clay-200: #E8A98F;
  --clay-300: #D5764F;
  --clay-500: #B5491C;   /* primary clay */
  --clay-600: #993D17;
  --clay-700: #7A2F11;

  /* Saffron — warm gold. Dignity, light. Echoes both the
     Pan-African flag's gold band and the Latino flag's tones. */
  --saffron-50:  #FAF1DA;
  --saffron-100: #F4DFA8;
  --saffron-200: #ECC972;
  --saffron-500: #D4A23E;   /* primary saffron */
  --saffron-600: #B0832B;
  --saffron-700: #836018;

  /* Moss — deep green. Salud (health), trust, civic gravity. */
  --moss-50:  #E6EFE9;
  --moss-100: #BDD5C5;
  --moss-500: #1E4A37;     /* primary moss */
  --moss-700: #0F2C1F;

  /* Maroon — deep red. Used on dark forest surfaces for warmth + gravitas
     where clay terracotta would clash with green. */
  --maroon-50:  #F7E5E8;
  --maroon-100: #ECC3CB;
  --maroon-200: #C68490;
  --maroon-300: #A85365;
  --maroon-500: #7A2632;    /* primary maroon */
  --maroon-700: #4F1820;

  /* Legacy violet — kept for downstream pages inheriting from the
     SaludConTech entrepreneurship-arm surface */
  --violet-300: #A78BFA;
  --violet-500: #6B5CE7;
  --violet-600: #5B4BD3;

  /* ---------- SEMANTIC TOKENS — Light (Covenant / document) ---------- */
  --bg:          var(--paper-50);
  --bg-elevated: #FFFFFF;
  --bg-sunken:   var(--paper-100);
  --fg:          var(--ink-900);
  --fg-muted:    var(--ink-700);
  --fg-subtle:   #5B6781;
  --fg-on-dark:  var(--paper-50);
  --rule:        rgba(18, 24, 38, 0.14);
  --rule-strong: rgba(18, 24, 38, 0.32);
  --accent:      var(--clay-500);
  --accent-hover:var(--clay-600);
  --accent-soft: var(--clay-50);
  --highlight:   var(--saffron-500);
  --trust:       var(--moss-500);
  --focus-ring:  color-mix(in oklch, var(--clay-500) 50%, transparent);

  /* ---------- SEMANTIC TOKENS — Dark (marketing site surface) ---------- */
  --bg-dark:        var(--ink-950);
  --bg-dark-elev:   var(--ink-900);
  --bg-dark-sunken: #07090F;
  --fg-on-bg-dark:  #F4EFE3;
  --rule-on-dark:   rgba(244, 239, 227, 0.10);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui:      "Space Grotesk", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---------- TYPE SCALE (semantic) ----------
     Display uses serif — gives the Covenant document a
     treaty-grade gravitas. UI/eyebrow uses Space Grotesk.
     Body uses Inter. */
  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-body:  1.55;
  --leading-loose: 1.7;

  --tracking-tight:  -0.022em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.18em;

  --display-1: 700 clamp(3rem, 6vw + 1rem, 5.75rem)/var(--leading-tight) var(--font-display);
  --display-2: 600 clamp(2.25rem, 4vw + 1rem, 4rem)/var(--leading-tight) var(--font-display);
  --headline:  600 clamp(1.75rem, 2vw + 1rem, 2.5rem)/var(--leading-snug) var(--font-display);
  --title:     500 1.5rem/1.25 var(--font-display);
  --subtitle:  500 1.125rem/1.4 var(--font-ui);

  --body-lg:   400 1.1875rem/var(--leading-body) var(--font-body);
  --body:      400 1rem/var(--leading-body) var(--font-body);
  --body-sm:   400 0.875rem/1.5 var(--font-body);
  --caption:   500 0.75rem/1.35 var(--font-ui);
  --eyebrow:   600 0.75rem/1 var(--font-ui);
  --mono:      400 0.9375rem/1.55 var(--font-mono);

  /* ---------- SPACING / RADII / SHADOW ---------- */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;    --s-10: 8rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-sm:    0 1px 2px rgba(11, 15, 26, 0.06);
  --shadow:       0 6px 20px -10px rgba(11, 15, 26, 0.20), 0 2px 6px rgba(11, 15, 26, 0.06);
  --shadow-lg:    0 24px 48px -24px rgba(11, 15, 26, 0.30), 0 8px 16px -8px rgba(11, 15, 26, 0.10);
  --shadow-ring:  inset 0 0 0 1px var(--rule);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply by adding `class="scd"` to a root container, or wire
   these into the html tag of a fresh document.
   ============================================================ */
.scd {
  color: var(--fg);
  background: var(--bg);
  font: var(--body);
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.scd.scd--dark {
  color: var(--fg-on-bg-dark);
  background: var(--bg-dark);
}

.scd h1, .scd .h1 { font: var(--display-1); letter-spacing: var(--tracking-tight); margin: 0; text-wrap: balance; }
.scd h2, .scd .h2 { font: var(--display-2); letter-spacing: var(--tracking-tight); margin: 0; text-wrap: balance; }
.scd h3, .scd .h3 { font: var(--headline);  letter-spacing: var(--tracking-tight); margin: 0; }
.scd h4, .scd .h4 { font: var(--title); margin: 0; }
.scd .eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--clay-500);
}
.scd .lede { font: var(--body-lg); color: var(--fg-muted); text-wrap: pretty; }
.scd p { font: var(--body); margin: 0; text-wrap: pretty; }
.scd small, .scd .caption { font: var(--caption); color: var(--fg-subtle); }
.scd code, .scd kbd, .scd pre { font: var(--mono); }
.scd a { color: var(--clay-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.scd a:hover { color: var(--clay-700); }

/* Drop-cap for Covenant preamble */
.scd .dropcap::first-letter {
  font: 600 5.5em/0.85 var(--font-display);
  float: left;
  margin: 0.05em 0.12em 0 -0.04em;
  color: var(--clay-500);
}

/* Selection */
.scd ::selection { background: var(--saffron-200); color: var(--ink-900); }