@font-face { font-family: "Fraunces"; src: url("/fonts/Fraunces-VariableFont.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-VariableFont.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/JetBrainsMono-VariableFont.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root { --font-fraunces-loaded: "Fraunces"; --font-inter-loaded: "Inter"; --font-mono-loaded: "JetBrains Mono"; }
/* Fraunces = display/editorial. Inter = interface. JetBrains Mono = numbers/data.
   As três famílias são auto-hospedadas pelo consumidor: `next/font/google` baixa os
   arquivos em tempo de build e os serve do próprio domínio, expondo cada família como
   variável CSS. Não há requisição a CDN em runtime.

   O consumidor deve definir --font-fraunces-loaded, --font-inter-loaded e
   --font-mono-loaded (nomes das variáveis geradas por `next/font/local`, ver
   apps/web/app/layout.tsx). Os fallbacks abaixo mantêm o texto legível caso alguma
   família não carregue.

   Binários auto-hospedados em apps/web/public/fonts/ (variable fonts, eixo wght),
   distribuídos sob SIL Open Font License pelos projetos originais. */
:root {
  --font-display: var(--font-fraunces-loaded), "Iowan Old Style", Georgia, serif;
  --font-ui: var(--font-inter-loaded), system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: var(--font-mono-loaded), ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* BÚSSOLA — COLOR TOKENS
   Base warm-paper palette + 4 semantic accents. Never introduce a hue
   outside this list; if something needs emphasis, use ocre. */
:root {
  /* --- Paper / surfaces --- */
  --paper: #f7f3ec;            /* app background */
  --paper-2: #efe8dc;           /* secondary background: rails, wells, table headers */
  --surface-card: #fffdf9;      /* card surface, always on top of paper */
  --surface-sunken: #f2ece1;    /* inputs, inset wells */
  --surface-ink: #191612;       /* dark surface: tooltips, annotations */

  /* --- Ink / text --- */
  --ink: #12100d;               /* primary text */
  --ink-2: #5f574a;             /* secondary text, body prose */
  --ink-muted: #8a8072;         /* captions, labels, disabled */
  --ink-on-dark: #f7f3ec;       /* text on --surface-ink / sea gradient */
  --ink-on-dark-2: rgba(247,243,236,0.72);

  /* --- Lines --- */
  --line: #ded4c2;              /* default border */
  --line-soft: #e8e0d2;         /* internal dividers, table rules */
  --line-strong: #c9bda6;       /* focus rings, dashed outlier borders */

  /* --- Accent: sea green — PRIMARY / POSITIVE / BRAND --- */
  --sea: #1f5c56;
  --sea-deep: #17453f;
  --sea-dark: #123c37;
  --sea-tint: #e6f0ec;
  --sea-tint-2: #d3e4de;
  --sea-gradient: linear-gradient(135deg, #24675f 0%, #1f5c56 45%, #123c37 100%);

  /* --- Accent: sun ocre — ACTION / OPPORTUNITY / "estourou" --- */
  --ocre: #d98a3d;
  --ocre-deep: #b56f2c;
  --ocre-dark: #8f561f;
  --ocre-tint: #f7ead9;
  --ocre-tint-2: #f0dabc;

  /* --- Accent: terracotta — NEGATIVE / FIX --- */
  --terracotta: #b5452f;
  --terracotta-deep: #93341f;
  --terracotta-tint: #f7e6e0;
  --terracotta-tint-2: #eecfc6;

  /* --- Accent: sky blue — NICHE / INFORMATIONAL CONTEXT --- */
  --sky: #3a7ca5;
  --sky-deep: #2d6284;
  --sky-tint: #e4eef4;
  --sky-tint-2: #cfe0ea;

  /* --- Semantic aliases (prefer these in components) --- */
  --accent-primary: var(--sea);
  --accent-primary-hover: var(--sea-deep);
  --accent-action: var(--ocre);
  --accent-action-hover: var(--ocre-deep);
  --accent-positive: var(--sea);
  --accent-negative: var(--terracotta);
  --accent-niche: var(--sky);
  --accent-ai: var(--sky);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-muted);
  --text-on-primary: #fffdf9;
  --text-on-action: #241403;

  --bg-app: var(--paper);
  --bg-rail: var(--paper-2);
  --border-default: var(--line);
  --border-subtle: var(--line-soft);

  --focus-ring: 0 0 0 3px rgba(31,92,86,0.22);

  /* Delta / data series */
  --data-best: var(--sea);
  --data-worst: var(--terracotta);
  --data-neutral: var(--ink-muted);
  --data-grid: var(--line-soft);
  --data-marker: var(--ocre);
}

/* BÚSSOLA — TYPE SCALE
   Display/headings: Fraunces (500–600, italic for editorial emphasis).
   Interface/body: Inter (400–700). Numbers/metrics: JetBrains Mono (500–700). */
:root {
  /* sizes */
  --fs-display: 44px;   --lh-display: 1.04;  --ls-display: -0.02em;
  --fs-h1: 32px;        --lh-h1: 1.12;       --ls-h1: -0.015em;
  --fs-h2: 24px;        --lh-h2: 1.18;       --ls-h2: -0.01em;
  --fs-h3: 19px;        --lh-h3: 1.25;       --ls-h3: -0.005em;
  --fs-h4: 16px;        --lh-h4: 1.3;
  --fs-body: 15px;      --lh-body: 1.55;
  --fs-body-lg: 17px;   --lh-body-lg: 1.5;
  --fs-small: 13px;     --lh-small: 1.45;
  --fs-caption: 12px;   --lh-caption: 1.4;
  --fs-label: 11px;     --lh-label: 1.1;     --ls-label: 0.1em;
  --fs-metric-xl: 40px; --fs-metric: 28px;   --fs-metric-sm: 20px;

  /* weights */
  --fw-display: 600;
  --fw-heading: 600;
  --fw-heading-light: 500;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
}

/* Reusable text roles — apply as classes in static pages, or copy the
   declarations into component style objects. */
.t-display { font: var(--fw-display) var(--fs-display)/var(--lh-display) var(--font-display); letter-spacing: var(--ls-display); color: var(--text-primary); }
.t-h1 { font: var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-h1); color: var(--text-primary); }
.t-h2 { font: var(--fw-heading) var(--fs-h2)/var(--lh-h2) var(--font-display); letter-spacing: var(--ls-h2); color: var(--text-primary); }
.t-h3 { font: var(--fw-heading-light) var(--fs-h3)/var(--lh-h3) var(--font-display); color: var(--text-primary); }
.t-h4 { font: var(--fw-semibold) var(--fs-h4)/var(--lh-h4) var(--font-ui); color: var(--text-primary); }
.t-body { font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--text-secondary); }
.t-body-strong { font: var(--fw-medium) var(--fs-body)/var(--lh-body) var(--font-ui); color: var(--text-primary); }
.t-small { font: var(--fw-regular) var(--fs-small)/var(--lh-small) var(--font-ui); color: var(--text-secondary); }
.t-caption { font: var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-ui); color: var(--text-muted); }
.t-label { font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.t-metric { font: var(--fw-medium) var(--fs-metric)/1 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
.t-mono { font: var(--fw-medium) var(--fs-small)/1.3 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.t-editorial-em { font-style: italic; font-weight: var(--fw-heading-light); }

/* 4px base scale. Component padding uses 12/16/20/24; page gutters 24/32. */
:root {
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --gutter-mobile: var(--sp-4);
  --gutter-desktop: var(--sp-8);
  --grid-gap: var(--sp-4);
  --sidebar-w: 248px;
  --tabbar-h: 60px;
  --topbar-h: 56px;
  --content-max: 1240px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

:root {
  --r-xs: 6px;    /* chips, tiny toggles */
  --r-sm: 8px;    /* inner elements: buttons, inputs, thumbnails */
  --r-md: 11px;   /* nested blocks inside cards, segmented control */
  --r-card: 14px; /* every card */
  --r-hero: 18px; /* hero / signature action card */
  --r-pill: 999px;
}

/* Warm shadows only — tinted with brown, never pure black. */
:root {
  --shadow-xs: 0 1px 2px rgba(70,54,32,0.06);
  --shadow-sm: 0 1px 3px rgba(70,54,32,0.07), 0 1px 1px rgba(70,54,32,0.04);
  --shadow-card: 0 2px 6px rgba(70,54,32,0.06), 0 1px 2px rgba(70,54,32,0.04);
  --shadow-raised: 0 6px 18px rgba(70,54,32,0.10), 0 2px 5px rgba(70,54,32,0.05);
  --shadow-hero: 0 12px 32px rgba(18,60,55,0.22), 0 3px 8px rgba(18,60,55,0.14);
  --shadow-overlay: 0 18px 48px rgba(45,34,18,0.22);
  --scrim: rgba(25,20,12,0.44);
  --inset-sunken: inset 0 1px 2px rgba(70,54,32,0.06);
}

:root {
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --dur-drawer: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-control: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

@keyframes bussola-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}
@keyframes bussola-shimmer {
  0% { background-position: -180% 0; }
  100% { background-position: 180% 0; }
}
@keyframes bussola-drawer-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes bussola-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Páginas públicas ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-ui); }
a { color: var(--sea); text-underline-offset: 2px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  max-width: 760px; margin: 0 auto; padding: var(--sp-6) var(--gutter-mobile); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--sea);
  font: var(--fw-display) 20px/1 var(--font-display); }
.top nav { display: flex; gap: var(--sp-4); font-size: var(--fs-small); }
.top nav a { color: var(--ink-2); text-decoration: none; }
.top nav a:hover { color: var(--sea); }
.doc { max-width: 760px; margin: 0 auto var(--sp-12); padding: var(--sp-8) var(--gutter-mobile);
  background: var(--surface-card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.eyebrow { margin: 0; font: var(--fw-semibold) var(--fs-label)/var(--lh-label) var(--font-ui); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
h1 { margin: var(--sp-2) 0 var(--sp-2); font: var(--fw-heading) var(--fs-h1)/var(--lh-h1) var(--font-display); letter-spacing: var(--ls-h1); }
h2 { margin: var(--sp-8) 0 var(--sp-2); font: var(--fw-heading-light) var(--fs-h3)/var(--lh-h3) var(--font-display); }
p, li { color: var(--ink-2); }
ul { padding-left: 1.2em; }
li { margin: var(--sp-1) 0; }
.updated { font: var(--fw-medium) var(--fs-caption)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); }
.note { padding: var(--sp-3) var(--sp-4); background: var(--sky-tint); border: 1px solid var(--sky-tint-2); border-radius: var(--r-md); color: var(--sky-deep); }
.foot { max-width: 760px; margin: 0 auto; padding: 0 var(--gutter-mobile) var(--sp-8); font-size: var(--fs-caption); color: var(--text-muted); }
@media (min-width: 768px) { .doc { padding: var(--sp-10) var(--sp-12); } .top, .foot { padding-left: var(--sp-8); padding-right: var(--sp-8); } }