/* =============================================================
   Ethos Strategy — Foundations (v2, reconciled to real templates)
   ============================================================= */

/* Brand fonts: self-hosted Familjen Grotesk (primary) + Google-Fonts Inter (body/UI). */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Familjen Grotesk';
  src: url('./fonts/FamiljenGrotesk-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Brand palette ---------- */
  --ethos-blue:     #0A33EE;
  --clarity-blue:   #BCC5F2;
  --insight-lime:   #D9FA99;
  --signal-blue:    #8DA3E1;
  --ethos-white:    #F7F6F3;
  --utility-blue:   #5774EA;

  /* ---------- Template-derived surfaces ---------- */
  --soft-blue:      #E8EEFC;   /* pale blue list-row on white */
  --soft-lime:      #EFF6D9;   /* pale lime list-row on white */
  --soft-red:       #FCE6E0;   /* warning card fill */
  --red-ink:        #D24B2E;   /* warning text */

  /* ---------- Neutrals ---------- */
  --ink:            #0B1220;
  --ink-2:          #3A3F4B;
  --ink-3:          #6C7280;
  --line:           #E6E4DE;
  --line-strong:    #CFCDBF;
  --paper:          #FFFFFF;

  /* Semantics */
  --bg: var(--ethos-white); --bg-panel: var(--paper);
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--ink-3);
  --accent: var(--ethos-blue); --highlight: var(--insight-lime); --border: var(--line);

  /* ---------- Type families ----------
     Primary (Display & Headlines) = Familjen Grotesk Bold
     Secondary (Body)              = Inter Regular / Medium
     Tertiary (UI, labels, chips)  = Inter SemiBold
     Mono (fallback, code)         = JetBrains Mono                */
  --font-display:   'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --font-headline:  'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-ui:        'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale ---------- */
  --fs-hero: 96px; --fs-display: 72px; --fs-h1: 56px; --fs-h2: 40px;
  --fs-h3: 28px; --fs-h4: 22px;
  --fs-body-lg: 20px; --fs-body: 18px; --fs-body-sm: 16px;
  --fs-caption: 14px; --fs-micro: 12px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --lh-tight: 1.02; --lh-snug: 1.1; --lh-normal: 1.45; --lh-relaxed: 1.6;
  --ls-tight: -0.02em; --ls-snug: -0.01em; --ls-wide: 0.02em; --ls-caps: 0.18em;

  /* ---------- Spacing ---------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- Radii ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(10,18,32,0.04);
  --shadow-sm: 0 2px 6px rgba(10,18,32,0.06), 0 1px 2px rgba(10,18,32,0.04);
  --shadow-md: 0 8px 24px rgba(10,18,32,0.08), 0 2px 6px rgba(10,18,32,0.04);
  --shadow-lg: 0 24px 60px rgba(10,18,32,0.12);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22,1,0.36,1); --dur-fast:120ms; --dur-med:220ms; --dur-slow:420ms;
}

/* ---------- Signature devices (reusable across carousels/web) ---------- */

/* Eyebrow series label: "AI CLARITY" / "TIP TUESDAY" */
.eyebrow-series {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* Lime pill with dark-blue text — the signature highlight device */
.pill-lime {
  display: inline-block;
  background: var(--insight-lime);
  color: var(--ethos-blue);
  padding: 0.2em 0.5em;
  border-radius: var(--r-md);
  font-family: inherit;
  font-weight: inherit;
}

/* Inverse: blue pill with lime text */
.pill-blue {
  display: inline-block;
  background: var(--ethos-blue);
  color: var(--insight-lime);
  padding: 0.2em 0.6em;
  border-radius: var(--r-md);
}

/* Lime underline / accent bar under a highlighted phrase */
.lime-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 0.06em;
}
.lime-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.06em;
  height: 10px;
  background: var(--insight-lime);
  border-radius: 2px;
}

/* Italic soft-weight callout */
.callout-italic {
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
}

/* Type role utilities (same API as v1) */
.t-hero { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg); }
.t-display { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg); }
.t-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--fg); }
.t-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg); }
.t-h3 { font-family: var(--font-headline); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg); }
.t-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg); }
.t-caption { font-family: var(--font-ui); font-weight: var(--fw-medium); font-size: var(--fs-caption); color: var(--fg-3); }
.t-label { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-caption); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2); }

.ethos-root {
  background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body);
  line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}