/* ============================================================
   OAK RESEARCH — tokens do design system (derivados do
   equity research dashboard). Todas as páginas linkam este
   arquivo: mudou aqui, mudou no site inteiro.
   ============================================================ */

:root {
  /* Superfícies (near-black, em camadas) */
  --er-bg:          #0a0a0a;
  --er-surface:     #141414;
  --er-surface-alt: #181818;
  --er-surface-2:   #1a1a1a;
  --er-surface-3:   #1e1e1e;

  /* Bordas */
  --er-border:       #1f1f1f;
  --er-border-light: #333333;
  --er-ctrl-border:  #2a2a2a;

  /* Acento da marca: FLAME */
  --er-accent:    #E25822;
  --er-accent-45: rgba(226, 88, 34, 0.45);
  --er-accent-16: rgba(226, 88, 34, 0.16);
  --er-accent-10: rgba(226, 88, 34, 0.10);

  /* Secundárias quentes */
  --er-amber:     #d6a15a;
  --er-clay:      #c9a892;
  --er-clay-soft: #c89a86;   /* negativo (nunca vermelho) */

  /* Texto (cinzas quentes) */
  --er-text:      #e8e8e8;
  --er-text-2:    #cdcdcd;
  --er-text-body: #dcdcdc;
  --er-muted:     #9a9a9a;
  --er-muted-3:   #7a7a7a;
  --er-muted-5:   #5a5a5a;

  /* Semântica financeira */
  --er-pos: #E25822;
  --er-neg: #c89a86;
  --er-neu: #9a9a9a;

  /* Tipografia (system stacks — sem webfonts) */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--er-bg);
  color: var(--er-text-body);
  -webkit-font-smoothing: antialiased;
}

/* Números sempre em mono tabular */
.num, .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Eyebrow: mono uppercase com quadrado flame */
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--er-muted);
}
.eyebrow::before {
  content: ""; width: 5px; height: 5px;
  background: var(--er-accent); flex: none;
}

/* Cabeçalho do site (casca comum) */
.site-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--er-surface);
  border-bottom: 1px solid var(--er-border);
}
.site-header .brand {
  display: flex; align-items: center; gap: 10px;
  border-left: 3px solid var(--er-accent); padding-left: 12px;
  text-decoration: none; color: var(--er-text);
  font-weight: 600; font-size: 16px; letter-spacing: .2px;
}
.site-header .brand img, .site-header .brand svg { width: 26px; height: 26px; }

/* Rodapé com disclaimer */
.site-footer {
  padding: 18px 22px; margin-top: 48px;
  border-top: 1px solid var(--er-border);
  font-family: var(--mono); font-size: 10px;
  color: var(--er-muted-5); letter-spacing: .3px; line-height: 1.7;
}

/* Cards */
.card {
  background: var(--er-surface);
  border: 1px solid var(--er-border);
  border-radius: 10px;
  padding: 16px 22px;
}
a { color: var(--er-text-2); }
a:hover { color: var(--er-text); }