/* ============================================================
   EFFSO Design System, Colors & Type Foundations
   Source of truth: uploads/effso-brand-guidelines-WIP.html
                    uploads/Effso-brand-SKILL.md
   Font: Calibri everywhere (use Carlito as free fallback).
   ============================================================ */

/* --- Fonts ------------------------------------------------- */
/* Calibri is Microsoft-licensed. On the open web use Carlito
   (metric-compatible, same advance widths), swap in Calibri
   automatically on systems that have it. */
@font-face {
  font-family: 'EFFSO Sans';
  src: local('Calibri'), local('Carlito'), local('Segoe UI');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EFFSO Sans';
  src: local('Calibri Bold'), local('Carlito Bold'), local('Segoe UI Bold');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette (canonical) ---------------------- */
  --effso-dark-green:   #004D0B;  /* primary, headings, icons     */
  --effso-medium-green: #007E2B;  /* secondary, logo, series 2    */
  --effso-muted-green:  #8EBE78;  /* borders, lines, series 3     */
  --effso-pale-green:   #D0E3B8;  /* card fill, areas, chart fill */
  --effso-cream:        #EBF4E3;  /* report/UI background, slide accents */
  --effso-white:        #FFFFFF;

  /* Signal colors, semantic use only, never decorative */
  --effso-signal-yellow:  #F2CC0C;  /* warning / attention     */
  --effso-signal-magenta: #E01078;  /* ONE highlight per view  */

  /* ---------- Text & neutrals ------------------------------- */
  --text-dark:    #1A1A1A;                   /* default body     */
  --text-muted:   rgba(26,26,26,0.72);       /* secondary body   */
  --text-subtle:  rgba(26,26,26,0.56);       /* meta / caption   */
  --text-on-dark: #FFFFFF;                   /* on dark-green    */
  --divider:      rgba(0,0,0,0.10);
  --divider-soft: rgba(0,0,0,0.06);

  /* ---------- Semantic surface roles ------------------------ */
  --bg-page:       var(--effso-cream);       /* report/UI page default */
  --bg-slide:      var(--effso-white);       /* slide canvas default   */
  --bg-surface:    var(--effso-white);       /* cards, panels    */
  --bg-surface-2:  var(--effso-pale-green);  /* accented areas   */
  --bg-inverse:    var(--effso-dark-green);  /* dark sections    */
  --border:        var(--effso-muted-green); /* key box border   */
  --border-soft:   rgba(142,190,120,0.45);

  /* ---------- Semantic foreground roles --------------------- */
  --fg-heading:    var(--effso-dark-green);
  --fg-body:       var(--text-dark);
  --fg-muted:      var(--text-muted);
  --fg-accent:     var(--effso-medium-green);
  --fg-icon:       var(--effso-dark-green);
  --fg-highlight:  var(--effso-signal-magenta);

  /* ---------- Data-viz series (green-led, one highlight) ---- */
  --series-1:     var(--effso-dark-green);
  --series-2:     var(--effso-medium-green);
  --series-3:     var(--effso-muted-green);
  --series-fill:  var(--effso-pale-green);
  --series-highlight: var(--effso-signal-magenta);

  /* ---------- Radii ---------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;   /* small shapes, chips, inputs, buttons */
  --radius-md:  10px;
  --radius-lg:  12px;  /* container default, cards, panels    */
  --radius-xl:  16px;
  --radius-pill: 999px;

  /* ---------- Border widths -------------------------------- */
  --border-hair: 1px;
  --border-key:  2px;  /* key boxes (muted-green)              */
  --border-thick: 3px;

  /* ---------- Spacing scale (4-px base) -------------------- */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- Shadows -------------------------------------- */
  --shadow-soft:  0 4px 10px rgba(0,0,0,0.12);
  --shadow-card:  0 6px 14px rgba(0,0,0,0.14);
  --shadow-hover: 0 10px 24px rgba(0,0,0,0.16);
  --shadow-inset: inset 0 0 0 2px var(--effso-muted-green);

  /* ---------- Typography ----------------------------------- */
  --font-sans: 'EFFSO Sans', Calibri, Carlito, 'Segoe UI', system-ui,
               -apple-system, Roboto, Arial, sans-serif;
  --font-mono: Consolas, 'Courier New', ui-monospace, SFMono-Regular,
               Menlo, Monaco, monospace;

  /* Type scale, slide-authoring anchored in pt, UI in px.
     Print/slide pt values are preserved for fidelity with PPT master. */
  --fs-display: 40px;   /* big cover numbers / quotes            */
  --fs-h1:      30px;   /* section openers in UI (~22pt slide)   */
  --fs-h2:      22px;   /* slide title @ 22pt                    */
  --fs-h3:      18px;   /* subsection                            */
  --fs-h4:      16px;   /* slide body heading @ 14pt bold        */
  --fs-body:    16px;   /* UI body, matches slide body 12pt     */
  --fs-small:   13px;
  --fs-meta:    12px;   /* source / footnote                     */
  --fs-caption: 11px;

  /* Slide-exact sizes (use on 1920×1080 slides) */
  --slide-title:   29.33px; /* 22pt @ 96dpi */
  --slide-heading: 18.67px; /* 14pt         */
  --slide-body:    16px;    /* 12pt         */
  --slide-meta:    13.33px; /* 10pt         */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-base:   1.45;
  --lh-loose:  1.6;

  --ls-tight:  -0.01em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;
}

/* ============================================================
   Semantic element styles
   Scoped to .effso so the tokens can be included without
   nuking global resets elsewhere.
   ============================================================ */
.effso {
  font-family: var(--font-sans);
  color: var(--fg-body);
  background: var(--bg-page);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.effso h1, .effso .h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--fg-heading);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-4);
}
.effso h2, .effso .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-heading);
  margin: 0 0 var(--s-3);
}
.effso h3, .effso .h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-heading);
  margin: 0 0 var(--s-3);
}
.effso h4, .effso .h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-body);
  margin: 0 0 var(--s-2);
}
.effso p { margin: 0 0 var(--s-3); }
.effso small, .effso .meta {
  font-size: var(--fs-meta);
  color: var(--fg-muted);
}
.effso .eyebrow {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.effso .source {
  font-size: var(--fs-meta);
  color: var(--fg-muted);
  font-style: italic;
}
.effso code, .effso pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.effso a {
  color: var(--fg-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color .15s ease;
}
.effso a:hover { color: var(--effso-dark-green); }

/* Bullet hierarchy, matches the PowerPoint master (square →
   dash → hollow square → dash). */
.effso ul.effso-list { list-style: none; padding-left: 0; margin: 0 0 var(--s-4); }
.effso ul.effso-list > li { position: relative; padding-left: 18px; margin: 0 0 var(--s-2); }
.effso ul.effso-list > li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 8px; height: 8px; background: var(--effso-dark-green);
}
.effso ul.effso-list ul { list-style: none; padding-left: 18px; margin: var(--s-2) 0 0; }
.effso ul.effso-list ul > li { position: relative; padding-left: 14px; margin: 0 0 var(--s-1); }
.effso ul.effso-list ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 2px; background: var(--effso-medium-green);
}
.effso ul.effso-list ul ul > li::before {
  width: 8px; height: 8px; background: transparent;
  border: 1.5px solid var(--effso-muted-green);
}