/* Edugalbs design system: the tokens as CSS custom properties, written from tokens.json (https://www.edugalbs.com/ds).
 * Sizes are for a 1080px-wide canvas (reels, carousels, stories). */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;600&family=IBM+Plex+Mono:wght@400;500;700&display=swap");

/* dark (default): reels, carousels, stories, covers */
:root {
  --bg-000: #0b1220;
  --bg-100: #111a2e;
  --bg-200: #18233b;
  --ink: #e6ecf5;
  --ink-muted: #9aa8c0;
  --amber: #f5b041;
  --amber-soft: #fbd791;
  --violet: #8b6cff;
  --violet-soft: #c9b8ff;
  --teal: #2ec4b6;
  --teal-soft: #9ae8e0;
  --danger: #e5484d;
  --line: #e6ecf51f;
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --space-1: 16px;
  --space-2: 32px;
  --space-3: 64px;
  --space-4: 96px;
  --space-5: 160px;
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 40px;
  --radius-pill: 999px;
  --glow-accent: 0 0 120px 20px #f5b04155;
}

/* light: documents only */
[data-theme="light"] {
  --bg-000: #f3efe6;
  --bg-100: #e9e3d5;
  --bg-200: #ddd6c6;
  --ink: #101828;
  --ink-muted: #4a5468;
  --amber: #9a6200;
  --amber-soft: #7a4d00;
  --violet: #5a3ce6;
  --violet-soft: #7c5cff;
  --teal: #0f7a70;
  --teal-soft: #0a5c54;
  --danger: #b3262b;
  --line: #1018281f;
}

/* one accent per post: set data-pillar on the frame */
[data-pillar="fabrica"] { --accent: var(--amber); --accent-soft: var(--amber-soft); }
[data-pillar="blog"] { --accent: var(--violet); --accent-soft: var(--violet-soft); }
[data-pillar="lideranca"] { --accent: var(--teal); --accent-soft: var(--teal-soft); }

/* the "Quebrou" (what broke) marker: the only coloured left border */
.broke-mark { position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--danger); }

/* type styles */
.t-hook-xl { font-family: var(--font-display); font-size: 88px; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; }
.t-hook-lg { font-family: var(--font-display); font-size: 64px; line-height: 1.0; font-weight: 800; letter-spacing: -0.015em; }
.t-title-md { font-family: var(--font-display); font-size: 44px; line-height: 1.1; font-weight: 700; letter-spacing: -0.01em; }
.t-eyebrow { font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: 0.12em; }
.t-body-lg { font-family: var(--font-body); font-size: 34px; line-height: 1.35; font-weight: 400; }
.t-caption-video { font-family: var(--font-body); font-size: 40px; line-height: 1.25; font-weight: 600; }
.t-body-sm { font-family: var(--font-body); font-size: 24px; line-height: 1.4; font-weight: 400; }
.t-stat-xl { font-family: var(--font-mono); font-size: 120px; line-height: 1.0; font-weight: 700; }
.t-chapter { font-family: var(--font-mono); font-size: 26px; line-height: 1.2; font-weight: 500; letter-spacing: 0.06em; }
.t-code { font-family: var(--font-mono); font-size: 26px; line-height: 1.5; font-weight: 400; }