/* ============================================================
 * Tolky — Colors & Type
 * Source: Figma "exemplo-figma.fig" + uploaded brand fonts.
 * ============================================================ */

/* ---------------------------------------------------------------
 * Webfont — Georama (variable-weight, 9 cuts shipped in /fonts)
 * Full Georama family also includes Condensed / Expanded /
 * SemiCondensed / etc. variants in /uploads/ if needed.
 * --------------------------------------------------------------- */
@font-face {
  font-family: "Georama";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/Georama-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  src: url("./fonts/Georama-BoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Georama";
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url("./fonts/Georama-Black.ttf") format("truetype");
}

:root {
  /* ─── Colors ───────────────────────────────────────────────── */

  /* Primary — periwinkle blue. The signature Tolky color. */
  --tolky-blue:        #506FFD;   /* primary */
  --tolky-blue-600:    #425CC5;   /* darker — used in logo glyph */
  --tolky-blue-700:    #304491;   /* darkest blue tint */
  --tolky-blue-300:    #6F8AF6;   /* mid */
  --tolky-blue-200:    #A7B6FE;   /* lavender — speech-bubble dots */
  --tolky-blue-100:    #C4CEFE;   /* lighter lavender */
  --tolky-blue-050:    #E2E7FF;   /* palest lavender — soft surfaces */

  /* Ink — deep navy. Used for body text & dark capsules. */
  --tolky-ink-900:     #0D1126;   /* near-black ink */
  --tolky-ink-800:     #1F2C5D;   /* heading ink */
  --tolky-ink-700:     #1E2A5E;   /* primary heading */

  /* Neutrals */
  --tolky-text:        #71717A;   /* zinc — body copy on light bg */
  --tolky-text-muted:  #4D6A78;   /* slate — captions, sub-labels */
  --tolky-text-deep:   #002B3E;   /* deep teal-black — eyebrow labels */
  --tolky-white:       #FFFFFF;
  --tolky-bg:          #FFFFFF;
  --tolky-bg-soft:     #F7F8FB;   /* off-white surface */

  /* Semantic — surfaces */
  --bg:                var(--tolky-white);
  --bg-invert:         var(--tolky-blue);   /* signature blue panels */
  --bg-ink:            var(--tolky-ink-900);
  --surface-soft:      var(--tolky-bg-soft);
  --surface-tint:      var(--tolky-blue-050);

  --fg:                var(--tolky-ink-700);
  --fg-1:              var(--tolky-ink-700);
  --fg-2:              var(--tolky-text);
  --fg-3:              var(--tolky-text-muted);
  --fg-on-blue:        var(--tolky-white);

  --accent:            var(--tolky-blue);
  --accent-muted:      var(--tolky-blue-200);
  --accent-soft:       var(--tolky-blue-050);
  /* Highlight — título + box variam com o fundo (ver .tolky-bg--*) */
  --headline-color:      var(--tolky-ink-700);
  --highlight-box:       var(--tolky-blue-200); /* azul claro — fundo branco */
  --highlight-text:      var(--tolky-ink-700);
  --highlight-pad:       0.1em; /* padding simétrico x/y do box atrás da palavra */

  --border:            #E5E7EF;
  --border-strong:     var(--tolky-blue-100);

  /* ─── Type ────────────────────────────────────────────────── */
  --font-sans:         "Georama", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display:      "Georama", ui-sans-serif, system-ui, sans-serif;
  --font-quote:        "Georgia", "Times New Roman", serif;       /* used for the giant “ glyph */

  /* Type scale (deck-native — 1920×1080).
     For app/web UI, prefer the smaller --text-* tokens. */
  --display-xl:        clamp(64px, 6vw, 102px);   /* hero deck title */
  --display-lg:        clamp(48px, 5vw,  80px);   /* slide section title */
  --display-md:        clamp(36px, 3.6vw, 56px);  /* sub-display */
  --headline:          clamp(28px, 2.8vw, 44px);
  --title:             clamp(22px, 2.2vw, 32px);
  --subtitle:          clamp(18px, 1.6vw, 22px);
  --body-lg:           20px;
  --body:              16px;
  --caption:           14px;
  --eyebrow:           13px;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  44px;
  --text-5xl:  64px;
  --text-6xl:  100px;

  /* Weights */
  --w-light:   300;
  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;
  --w-black:   900;

  /* Leading & tracking */
  --leading-tight:   0.82;    /* deck headlines — ajustado para denser */
  --leading-snug:    0.95;
  --leading-normal:  1.2;     /* body — Figma uses 1.2 throughout */
  --leading-relaxed: 1.4;
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;

  /* ─── Layout safety ──────────────────────────── */
  /* Respiro mínimo — todo entregável deve respeitar (ou superar) estes
     valores. UI/UX: alinhamento consistente + espaçamento em tokens, nunca
     colar conteúdo na borda do canvas. Ver CLAUDE.md § UI & UX. */
  --safe-pad-x: 120px;        /* margem horizontal mínima */
  --safe-pad-y: 120px;        /* margem vertical mínima */
  --safe-pad-x-post: 80px;    /* social posts (1080) */
  --safe-pad-y-post: 80px;

  /* ─── Radii / shadows / spacing ───────────────────────────── */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-bubble: 24px 24px 24px 6px; /* speech-bubble corner shape */

  --shadow-sm: 0 1px 2px rgba(13, 17, 38, 0.06);
  --shadow-md: 0 6px 18px rgba(30, 42, 94, 0.08);
  --shadow-lg: 0 18px 48px rgba(30, 42, 94, 0.12);

  --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;
}

/* ─── Element defaults ─────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--display-lg);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--display-md);
  line-height: var(--leading-tight);
  color: var(--fg-1);
  margin: 0;
  text-wrap: pretty;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--headline);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--title);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
h5, .h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semi);
  font-size: var(--subtitle);
  line-height: var(--leading-snug);
  color: var(--fg-1);
  margin: 0;
}
p, .p {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--body);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0 0 1em 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--eyebrow);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.caption {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--caption);
  color: var(--fg-3);
  line-height: var(--leading-normal);
}
small, .small {
  font-size: var(--text-sm);
  color: var(--fg-3);
}
code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--surface-soft);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* ============================================================
 * Highlight signature — retângulo ATRÁS da palavra de destaque.
 * Uma palavra por headline.
 *
 * PADDING: simétrico em x e y via --highlight-pad (inset no ::before).
 * Não usar height fixo nem padding só horizontal no span — isso deixa o
 * box maior em cima/baixo ou à esquerda/direita.
 *
 * EMPILHAMENTO: o box fica SEMPRE abaixo de toda tipografia (incl. linhas
 * acima em headlines com <br>). O ::before usa z-index:-1.
 * isolation:isolate SOMENTE no h1/h2/.headline — NUNCA no span .hl
 * (isolation no .hl faz o box cobrir texto de linhas anteriores).
 *
 * Fundo branco     → título ink, highlight box lavanda (#A7B6FE)
 * Fundo azul claro → título branco, highlight box ink (#1E2A5E)
 * Fundo azul escuro→ título branco, highlight box blue.500 (#506FFD)
 * ============================================================ */
h1, h2, .h1, .h2, .tolky-headline, .headline {
  isolation: isolate;
}
.tolky-highlight, .hl {
  position: relative;
  display: inline-block;
  color: var(--highlight-text);
  z-index: auto; /* nunca 0 nem valor numérico — ver brand-core § Highlight */
  isolation: auto;
}
.tolky-highlight::before, .hl::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--highlight-pad));
  background: var(--highlight-box);
  border-radius: 0;
  z-index: -1;
}

/* Contextos de fundo — aplicar no slide, section ou body */
.tolky-bg--white,
.tolky-slide {
  --headline-color: var(--tolky-ink-700);
  --highlight-box: var(--tolky-blue);
  --highlight-text: var(--tolky-white);
}
.tolky-bg--blue-light,
.tolky-slide--blue {
  --headline-color: var(--tolky-white);
  --highlight-box: var(--tolky-ink-700);
  --highlight-text: var(--tolky-white);
}
.tolky-bg--blue-dark,
.tolky-slide--ink {
  --headline-color: var(--tolky-white);
  --highlight-box: var(--tolky-blue);
  --highlight-text: var(--tolky-white);
}
.tolky-headline { color: var(--headline-color); }

/* ============================================================
 * Layout safety classes
 * ============================================================ */
/* Conteúdo dentro de um slide ou post — garante respiro mínimo,
   alinhamento previsível e impede texto de vazar para fora do canvas.
   Usar em todo material novo; margens maiores que o mínimo são bem-vindas. */
.tolky-safe {
  padding: var(--safe-pad-y) var(--safe-pad-x);
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  box-sizing: border-box;
}
.tolky-safe--post {
  padding: var(--safe-pad-y-post) var(--safe-pad-x-post);
}
/* Headline "display" para social posts e slides — line-height denso, hifenização,
   sem palavras isoladas no fim da linha (text-wrap: balance). */
.tolky-display {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin: 0;
  text-wrap: balance;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Slide-deck tokens (1920×1080). */
.tolky-slide {
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}
.tolky-slide--blue {
  background: var(--tolky-blue);
  color: var(--headline-color);
}
.tolky-slide--ink {
  background: var(--tolky-ink-900);
  color: var(--headline-color);
}