/* =========================================================
   SHEDO Design System — colors, type, motion, surfaces
   ---------------------------------------------------------
   "She does — and so will you. Together."
   Bold. Audacious. Evidence-led. Not pink, not charity-coded.

   NOTE: The @font-face declarations from the source design system
   pointed at local .ttf/.otf files. This standalone build loads the
   same families (Ubuntu, Dela Gothic One, Ubuntu Mono) from Google
   Fonts via <link> in index.html. "Brick" (proprietary brush face)
   falls back to Permanent Marker, exactly as the token chain intends.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* ===== Brand core (from Color_pallette.pdf) ===== */
  --shedo-red:        #E52A3F;   /* primary / action / heat        */
  --shedo-lime:       #D4D930;   /* primary accent / highlight      */
  --shedo-navy:       #2B2D42;   /* ink / dominant dark surface     */
  --shedo-slate:      #8D99AD;   /* neutral cool / muted UI         */

  /* ===== Brand secondary (sampled from logo set + patterns) ===== */
  --shedo-green:      #1F8A3D;   /* deep impact green               */
  --shedo-green-soft: #7EC589;   /* community/soft surface          */
  --shedo-cream:      #EFEDA6;   /* paper-on-red / soft lime tint   */
  --shedo-salmon:     #EE7A85;   /* warm-tone callouts on red bg    */
  --shedo-ink:        #1A1B2A;   /* near-black for type contrast    */
  --shedo-paper:      #FAF7F0;   /* off-white page                  */
  --shedo-white:      #FFFFFF;

  /* ===== Semantic foreground / background ===== */
  --fg-1:             var(--shedo-navy);     /* primary text on light    */
  --fg-2:             #4A4E66;               /* secondary text on light  */
  --fg-3:             var(--shedo-slate);    /* muted / meta             */
  --fg-on-dark:       var(--shedo-cream);    /* type on navy/red surface */
  --fg-on-dark-mute:  rgba(239, 237, 166, .65);

  --bg-page:          var(--shedo-paper);
  --bg-surface:       var(--shedo-white);
  --bg-dark:          var(--shedo-navy);
  --bg-hot:           var(--shedo-red);
  --bg-loud:          var(--shedo-lime);

  --border-subtle:    rgba(43, 45, 66, .12);
  --border-firm:      var(--shedo-navy);

  /* ===== Type families ===== */
  --font-display:     'Dela Gothic One', 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --font-body:        'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-script:      'Brick', 'Permanent Marker', 'Caveat Brush', cursive;
  --font-mono:        'Ubuntu Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ===== Type scale — print/large-canvas leaning ===== */
  --fs-mega:    clamp(72px, 12vw, 220px);
  --fs-h1:      clamp(48px, 7vw,  112px);
  --fs-h2:      clamp(36px, 4.5vw, 72px);
  --fs-h3:      clamp(28px, 3vw,  44px);
  --fs-h4:      24px;
  --fs-eyebrow: 13px;
  --fs-body:    17px;
  --fs-body-lg: 19px;
  --fs-small:   14px;
  --fs-micro:   11px;

  --lh-display: 0.92;
  --lh-headline: 1.02;
  --lh-tight:   1.15;
  --lh-body:    1.5;

  --tracking-display: -0.01em;
  --tracking-eyebrow:  0.16em;

  /* ===== Spacing (4px base) ===== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ===== Radii ===== */
  --r-0: 0;
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pill: 999px;
  --r-asym-start: 0;
  --r-asym-end:   18px;

  /* ===== Elevation ===== */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(43,45,66,.08), 0 2px 6px rgba(43,45,66,.06);
  --shadow-2: 0 8px 24px rgba(43,45,66,.10);
  --offset-block-red: 8px 8px 0 0 var(--shedo-red);
  --offset-block-lime: 8px 8px 0 0 var(--shedo-lime);
  --offset-block-navy: 8px 8px 0 0 var(--shedo-navy);

  /* ===== Motion ===== */
  --ease-snap:   cubic-bezier(.2, .8, .2, 1);
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in:     cubic-bezier(.6, 0, .9, .4);
  --dur-fast:    120ms;
  --dur:         200ms;
  --dur-slow:    340ms;
}

/* ---------- BASELINE ---------- */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- SEMANTIC TYPE ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--shedo-red);
}

.display, h1.display {
  font-family: var(--font-display);
  font-size: var(--fs-mega);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-headline);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
  text-wrap: balance;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--fg-2);
}

.meta, small {
  font-size: var(--fs-small);
  color: var(--fg-3);
}

.brick {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--shedo-red);
  letter-spacing: 0.01em;
  line-height: 0.85;
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--shedo-red);
}
.stat-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--fg-1);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(43,45,66,.06);
  padding: 0.1em 0.35em;
  border-radius: var(--r-1);
}

a {
  color: var(--shedo-red);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease-snap);
}
a:hover { color: var(--shedo-navy); }

::selection { background: var(--shedo-lime); color: var(--shedo-navy); }

/* ---------- Utility classes referenced by the layout ---------- */
.m0 { margin: 0 !important; }
.fx { display: flex; }
.ac { align-items: center; }
.jb { justify-content: space-between; }
.gap24 { gap: 24px; }
.posrel { position: relative; }
.posabs { position: absolute; }
.ohide { overflow: hidden; }