/* ==========================================================================
   Tatá Gonçalves — Design System
   Core tokens: color + typography
   ==========================================================================

   Three visual directions share a common backbone:
   - Deep ink blue as primary (per color_vibe answer: "frios e tech azul/preto/prata")
   - Warm cream/off-white as canvas (anti-sterile, pé no chão, raíz brasileira)
   - One saturated accent that shifts per direction
   - Big-display type (per typography_vibe: "display bold impactante")

   The "brand hook" is Império IA + Greek mythology agents (Cronos/Zeus/
   Afrodite) — this informs the use of a tall, confident display face paired
   with a working-body sans. Brazilian warmth meets a little bit of antiquity.
   ========================================================================== */

/* --- FONTS ----------------------------------------------------------------
   SUBSTITUTIONS (flagged to user — we don't have licensed files):
   - "Editorial New" → SUBSTITUTE: Fraunces (Google) but we're using
     Instrument Serif instead because it's more distinct, less overused,
     and reads more editorial-brazilian.
   - "Founders Grotesk" → SUBSTITUTE: Inter Display (close grotesk) +
     Geist for working body. Both Google / Vercel open.
   - "GT America Mono" → SUBSTITUTE: JetBrains Mono (open-source, strong).

   If Tatá has preferred licensed fonts, drop .woff2 into fonts/ and flip
   the @font-face blocks below.
   -------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* =====================================================================
     TYPOGRAPHY — FAMILIES
     ===================================================================== */
  --font-display: 'Instrument Serif', 'Times New Roman', serif;   /* manchetes, números, vibe editorial */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;      /* corpo, UI, botões */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* números, códigos, etiquetas */

  /* =====================================================================
     TYPOGRAPHY — SCALE (clamped for responsive display)
     1920px base. Minimum readable sizes protected.
     ===================================================================== */
  --fs-mega: clamp(72px, 11vw, 200px);    /* hero / page-title — display serif */
  --fs-giga: clamp(56px, 7.5vw, 128px);   /* section titles — display serif */
  --fs-h1:   clamp(40px, 5vw, 80px);      /* slide titles, landing H1 */
  --fs-h2:   clamp(32px, 3.5vw, 56px);
  --fs-h3:   clamp(24px, 2.2vw, 36px);
  --fs-h4:   20px;
  --fs-lead: 22px;                         /* lead paragraph */
  --fs-body: 17px;                         /* default body */
  --fs-small: 14px;
  --fs-micro: 12px;                        /* labels, overlines, tags */

  /* Line-heights kept tight for display, looser for body */
  --lh-display: 0.95;
  --lh-tight: 1.1;
  --lh-body: 1.55;
  --lh-loose: 1.7;

  /* Letter-spacing */
  --ls-display: -0.03em;        /* display serif wants slight negative */
  --ls-tight: -0.01em;
  --ls-body: 0em;
  --ls-caps: 0.08em;             /* overline / micro labels */

  /* Weights — body face */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* =====================================================================
     COLOR — CORE PALETTE (shared across all 3 directions)
     ===================================================================== */

  /* Ink — primary dark (deep navy, warmer than pure black) */
  --ink-950: #0A1020;           /* darkest — headlines, body on cream */
  --ink-900: #111A2E;           /* body text alt */
  --ink-800: #1A2640;
  --ink-700: #2A3655;
  --ink-500: #5C6784;
  --ink-400: #8B93A8;
  --ink-300: #B4B9C8;
  --ink-200: #D6D9E0;
  --ink-100: #E8EAEF;
  --ink-50:  #F2F3F6;

  /* Cream — warm canvas */
  --cream-50:  #FAF7F0;          /* page bg — warm off-white */
  --cream-100: #F5EFE0;          /* card bg alt */
  --cream-200: #EDE4CE;          /* divider / subtle panel */
  --cream-300: #DCCFB0;

  /* Pure whites + blacks — use sparingly */
  --white: #FFFFFF;
  --black: #000000;

  /* =====================================================================
     COLOR — DIRECTION A (default active): "IA COM ALMA"
     Editorial brazilian. Cream canvas, deep ink, one terracotta accent.
     The warmth pulls it away from tech-futurista into pé-no-chão premium.
     ===================================================================== */
  --accent: #C0432A;             /* terracotta — brazilian clay, brick, sunset */
  --accent-hover: #A5371F;
  --accent-soft: #F3D9CE;
  --accent-ink: #6B2313;         /* on-accent-soft text */

  /* Semantic mapping (direction-A defaults) */
  --bg: var(--cream-50);
  --bg-alt: var(--cream-100);
  --bg-panel: var(--white);
  --bg-inverse: var(--ink-950);

  --fg: var(--ink-950);
  --fg-1: var(--ink-950);
  --fg-2: var(--ink-700);         /* secondary text */
  --fg-3: var(--ink-500);         /* tertiary / meta */
  --fg-inverse: var(--cream-50);
  --fg-on-accent: var(--cream-50);

  --border: var(--ink-200);
  --border-strong: var(--ink-950);
  --border-soft: var(--cream-200);

  /* Semantic feedback colors */
  --success: #2F7D4F;
  --warn: #C77A0E;
  --danger: #B8321E;

  /* =====================================================================
     SHADOWS — "carved" feel, not floaty/fluffy
     ===================================================================== */
  --shadow-sm: 0 1px 2px rgba(10,16,32,0.08);
  --shadow-md: 0 4px 12px rgba(10,16,32,0.10);
  --shadow-lg: 0 12px 32px rgba(10,16,32,0.12);
  --shadow-xl: 0 24px 64px rgba(10,16,32,0.18);
  --shadow-inset: inset 0 0 0 1px var(--ink-950);  /* flat outline instead of drop */

  /* =====================================================================
     RADII — mostly hard edges, occasional soft round
     ===================================================================== */
  --r-0: 0;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* =====================================================================
     SPACING — 4px base
     ===================================================================== */
  --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;
  --s-32: 128px;

  /* =====================================================================
     MOTION
     ===================================================================== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);   /* gentle overshoot-free */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* bouncy — use on entrance */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 440ms;
}

/* ===========================================================================
   DIRECTION B — "FUNCIONÁRIOS DIGITAIS" (utility / workshop)
   Apply by adding class `.dir-b` to <html> or <body>.
   High-contrast B&W canvas with a single electric accent.
   =========================================================================== */
.dir-b {
  --bg: #F4F3EE;
  --bg-alt: #EAE8DF;
  --bg-panel: var(--white);
  --bg-inverse: #0C0C0E;

  --fg-1: #0C0C0E;
  --fg-2: #2B2B30;
  --fg-3: #6E6E78;
  --fg-inverse: #F4F3EE;

  --border: #D4D2C8;
  --border-strong: #0C0C0E;

  --accent: #1E4BFF;             /* saturated electric blue — like a good terminal cursor */
  --accent-hover: #1638CC;
  --accent-soft: #D7DFFF;
  --accent-ink: #0A1F7A;
  --fg-on-accent: #FFFFFF;
}

/* ===========================================================================
   DIRECTION C — "IMPÉRIO" (premium / mythology)
   Deep ink-navy canvas with warm gold accent. The boldest direction,
   closest to the "Mentoria Império IA" brand name.
   =========================================================================== */
.dir-c {
  --bg: #0E1B2E;
  --bg-alt: #162538;
  --bg-panel: #1B2D45;
  --bg-inverse: var(--cream-50);

  --fg-1: #F5EBD4;
  --fg-2: #C6BEA8;
  --fg-3: #8A8472;
  --fg-inverse: #0E1B2E;

  --border: #2A3B55;
  --border-strong: #F5EBD4;

  --accent: #D6A648;             /* warm gold — empire, not bling */
  --accent-hover: #B98A2F;
  --accent-soft: #3A2E14;
  --accent-ink: #F5EBD4;
  --fg-on-accent: #0E1B2E;
}

/* ===========================================================================
   SEMANTIC ELEMENT STYLES — classless-friendly
   =========================================================================== */

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

/* Display headings use the serif. Bold-impactante per brief. */
h1, .h1, h2, .h2, h3, .h3 {
  font-family: var(--font-display);
  font-weight: 400;           /* serif weight 400 reads heavier than sans 700 */
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }

/* Small headings use the sans for density */
h4, .h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 { font-size: var(--fs-h4); }

/* Display utilities — for hero headlines, slide titles */
.display-mega { font-family: var(--font-display); font-size: var(--fs-mega); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; }
.display-giga { font-family: var(--font-display); font-size: var(--fs-giga); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 400; }
.display-italic { font-style: italic; }

/* Body */
p, .p {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--fg-1); }

/* Micro / overline labels — uppercase mono, spaced */
.overline, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Inline / code */
code, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--fg-1);
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

/* Links */
a {
  color: var(--fg-1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent); }

/* Numbers — for stats. Display serif lines up beautifully. */
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  color: var(--fg-1);
}
.stat-num.accent { color: var(--accent); }

/* Utility: accent underline (used in hero copy) */
.accent-underline {
  background: linear-gradient(transparent 62%, var(--accent-soft) 62%);
  padding: 0 0.08em;
}