/* ── IME Section Library — Shared Stylesheet ─────────────────────
   Single source of truth for all design tokens, buttons, and font.
   Every section HTML must link to this FIRST:
     From wip/ or approved/:  <link rel="stylesheet" href="../shared.css">
     From sections/ root:     <link rel="stylesheet" href="shared.css">
   ─────────────────────────────────────────────────────────────── */

/* ── Google Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800&display=swap');

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── Design Tokens ────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --bg:       #FBFDFF;
  --text:     #1C3447;
  --blue:     #0090FF;
  --pink:     #E93D82;
  --green-it: #009246;
  --red-it:   #CE2B37;
  --surface:  #F0F7FF;   /* blue-tinted section bg */
  --muted:    #5A7A94;
  --font:     'Figtree', sans-serif;
  /* Semantic tokens (light mode) */
  --card-bg:      #FFFFFF;            /* card / modal backgrounds */
  --navy:         #1C3447;            /* dark panel bg — stays dark in light mode */
  --border:       rgba(28,52,71,0.08);
  --border-strong:rgba(28,52,71,0.15);

  /* ── Typography Scale (MANDATORY — agents MUST use these, never raw rem) ── */
  /* ⚠️  HARD FLOOR: --text-caption (0.85rem). Nothing smaller in body text. Ever. */
  --text-caption:    0.85rem;  /* 15.3px — fine print, disclaimers under CTAs */
  --text-eyebrow:    0.9rem;   /* 16.2px — eyebrows, badges, labels */
  --text-body:       1.0rem;   /* 18px   — standard body copy (THE DEFAULT) */
  --text-body-lg:    1.1rem;   /* 19.8px — lead/intro paragraphs below headings */
  --text-card-title: 1.4rem;   /* 25.2px — card/pillar titles */

  /* Backwards-compat alias (used in older sections — resolves to --text-body) */
  --text-body-sm:  var(--text-body);  /* alias → 1.0rem */
}

/* ── Dark Mode ────────────────────────────────────────────────── */
/* Activated by: body.dark (toggled via .dm-toggle button in each section) */
/* Source: pai-core/brand/design-tokens.md — Dark Mode Palette    */
body.dark {
  --bg:           #0F1923;
  --surface:      #162436;
  --text:         #E8ECF0;
  --muted:        rgba(255,255,255,0.55);
  --card-bg:      #1C2733;
  --navy:         #0A141F;
  --border:       rgba(255,255,255,0.06);
  --border-strong:rgba(255,255,255,0.12);
}

/* Body text weight must be 400+ on dark surfaces (300 is illegible on dark) */
body.dark p,
body.dark li,
body.dark [class$="__text"],
body.dark [class$="__desc"],
body.dark [class$="__sub"],
body.dark [class$="__attr-name"] {
  font-weight: 400;
}

/* ── Base ─────────────────────────────────────────────────────── */
html {
  font-size: 18px; /* Base scale: 1rem = 18px. Older audience (50-70+) needs comfortable reading. */
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  background: linear-gradient(to right, var(--blue), var(--pink));
  color: white;
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: 700;
  padding: 18px 40px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.15s;
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  font-family: var(--font);
  font-size: var(--text-body); /* same as btn-primary — consistent button text */
  font-weight: 600;
  padding: 18px 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.btn-ghost:hover { opacity: 1; }

/* Chevron character — wrap › in this span for bigger, spaced, thin chevron */
.btn-chevron {
  font-size: 1.8em;
  font-weight: 200;
  margin-left: 14px;
  display: inline-block;
  vertical-align: -0.08em;
  line-height: 1;
}

/* Secondary / ghost CTA arrow — thinner and smaller than primary chevron.
   Use → (→) instead of › for ghost links: no visual conflict with primary button. */
.btn-ghost-arrow {
  font-size: 1.0em;
  font-weight: 300;
  margin-left: 6px;
  display: inline-block;
  vertical-align: -0.05em;
  line-height: 1;
}

/* ── Dark Mode Toggle (section preview only — not for production) */
.dm-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  background: rgba(28,52,71,0.80);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font);
  letter-spacing: 0.04em;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.dm-toggle:hover { background: rgba(28,52,71,0.95); }
body.dark .dm-toggle {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.20);
}

/* ── Shared Typography Utilities ─────────────────────────────── */
/* Use these in every section. Only override what differs (color, align, max-width).
   Never redefine font-size / font-weight / letter-spacing / line-height per section. */

/* Eyebrow labels — badges, category tags, pillar numbers */
.section-eyebrow {
  font-size: var(--text-eyebrow); /* 0.9rem = 16.2px — HARD FLOOR */
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);            /* override: rgba(255,255,255,0.50) on dark bg */
}

/* Section headlines — the main h2 */
.section-headline {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--text);            /* override: #ffffff on dark bg */
  line-height: 1.15;
}

/* Intro / subtitle paragraph below the headline */
.section-sub {
  font-size: var(--text-body-lg); /* 1.1rem — intro paragraph below headline */
  font-weight: 400;
  color: var(--muted);            /* override: rgba(255,255,255,0.65) on dark bg */
  line-height: 1.5;
}

/* Card / pillar / step titles (h3) */
.card-title {
  font-size: var(--text-card-title); /* 1.65rem */
  font-weight: 800;
  color: var(--text);                /* override: #ffffff on dark bg */
  line-height: 1.2;
}

/* Card / pillar / step body text */
.card-body {
  font-size: var(--text-body); /* 1.0rem — standard body in cards */
  font-weight: 400;
  color: var(--muted);            /* override: rgba(255,255,255,0.65) on dark bg */
  line-height: 1.5;
}

/* Pillar / step number label (e.g. "01 — Grammar") */
.pillar-num {
  font-size: var(--text-eyebrow); /* 0.9rem */
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);             /* override per pillar color */
}

/* ── Italian Tricolor Dots ────────────────────────────────────── */
/* Decorative 3-dot flag accent: green · white · red
   Usage: <span class="it-dots"><span></span><span></span><span></span></span> */
.it-dots {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 12px;
}
.it-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.it-dots span:nth-child(1) { background: #009246; }
.it-dots span:nth-child(2) { background: #ffffff; border: 1px solid rgba(28,52,71,0.15); }
.it-dots span:nth-child(3) { background: #CE2B37; }

/* ── Responsive Breakpoint Reference ─────────────────────────── */
/* These breakpoints are the ONLY values used across all sections.
   Add section-specific rules inside these @media blocks in each
   section's inline <style> — never use other breakpoint values.

   @media (max-width: 1200px) — Large tablet / small laptop
   @media (max-width: 1024px) — Tablet landscape
   @media (max-width:  860px) — Tablet portrait
   @media (max-width:  680px) — Mobile (stack everything)
*/