/* GERADO por scripts/gerar_css_sole.py a partir de web/static/sole/styles.css
   (cópia da skill sole-capital-design). Não edite à mão: ao copiar a skill de
   novo, rode o script. O Google Fonts não entra aqui — o base.html e o
   login.html carregam por <link>, em paralelo com este arquivo. */

/* ── sole/tokens/fonts.css ── */
/* Montserrat (títulos e número de destaque) + Inter (corpo e dados).
   Brandbook pág. 6: Montserrat Bold 700 · Inter Regular 400 / Semi-Bold 600.
   500 entra para rótulo de botão no app; 700 da Inter para números de KPI.
   Carregadas do Google Fonts — se a casa licenciar arquivos próprios, troque
   este @import por @font-face apontando para .woff2 locais. */

/* ── sole/tokens/colors.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   Cores — Sole Capital (base) e tema escuro opcional.

   Fonte: Brand & Design System da designer, abr/2026 (PDF no Google Drive —
   link em marca.md > Fontes primárias).
   O brandbook nomeia quatro cores (Steel Blue, Brand Gold, Deep Charcoal,
   Pure White). O resto está marcado:
     · amostrado — medido no próprio PDF, não nomeado lá;
     · derivado  — calculado a partir da marca para passar em contraste AA;
     · mantido   — fora do brandbook, igual ao que o app já usava.

   Regra de uso: tela consome o nome SEMÂNTICO (--text-*, --surface-*…),
   nunca a primitiva --sole-* e nunca hex. A Mirante (tokens/brands.css)
   redeclara os semânticos; o tema escuro, abaixo, também.

   tokens/tokens.json é gerado daqui: python3 scripts/checar.py --escrever-tokens
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Primitivas: brandbook (pág. 5) ── */
  --sole-steel-blue:#467794;        /* 4,85:1 em branco: texto E fundo de texto branco */
  --sole-gold:#C8A856;              /* 2,28:1 em branco: NUNCA texto sobre claro */
  --sole-charcoal:#1A1A1A;          /* Deep Charcoal */
  --sole-white:#FFFFFF;             /* Pure White */

  /* ── Primitivas: amostradas do PDF ── */
  --sole-panel:#FAFAFA;             /* painel, fundo de página */
  --sole-paragraph:#4A4A4A;         /* texto de parágrafo */
  --sole-tint:#F0F4F6;              /* tinta azul-aço: item ativo, seleção */

  /* ── Primitivas: derivadas ── */
  --sole-line:#E4E4E4;              /* filete */
  --sole-line-strong:#BDBDBD;       /* borda de controle, borda forte */
  --sole-muted:#666666;             /* texto secundário, 5,74:1 */
  --sole-steel-blue-hover:#3B6780;  /* hover ESCURECE: clarear derruba o texto branco para ~3,9:1 */
  --sole-steel-blue-press:#325870;
  --sole-gold-text:#85702F;         /* o dourado que pode ser texto, 4,82:1 */
  --sole-gold-line:#B08A3E;         /* dourado de série de gráfico, 3,2:1 */

  /* ── Primitivas: mantidas (fora do brandbook — em-aberto #7) ── */
  --sole-positive:#3A6B4A;
  --sole-negative:#8B3A3A;

  /* ── Primitivas do tema escuro (Manual de Identidade Visual 2026, aposentado
        como base; sobrevive só aqui — em-aberto #11) ── */
  --sole-night:#14181E;
  --sole-night-raised:#1A1F27;
  --sole-night-deep:#0F1216;
  --sole-night-line:#282E3A;
  --sole-night-text:#EBEEF2;
  --sole-night-muted:#A5ACB8;
  --sole-night-accent:#6EAADC;      /* acento de texto no escuro: 7,2:1 sobre --sole-night */

  /* ═══ Semânticos — tema claro (padrão) ═══ */

  /* Superfícies */
  --surface-canvas:var(--sole-white);
  --surface-raised:var(--sole-white);
  --surface-card:var(--sole-white);
  --surface-page:var(--sole-panel);
  --surface-sunken:var(--sole-panel);
  --surface-inset:var(--sole-tint);
  --surface-inset-soft:var(--sole-panel);
  --surface-dark:var(--sole-charcoal);
  --surface-inverse:var(--sole-charcoal);
  --surface-overlay:rgba(26,26,26,.40);

  /* Texto */
  --text-heading:var(--sole-charcoal);
  --text-body:var(--sole-charcoal);
  --text-paragraph:var(--sole-paragraph);
  --text-muted:var(--sole-muted);
  --text-subtle:var(--sole-muted);
  --text-accent:var(--sole-steel-blue);
  --text-label:var(--sole-steel-blue);
  --text-on-action:var(--sole-white);
  --text-on-accent:var(--sole-white);
  --text-inverse:var(--sole-white);

  /* Filetes */
  --border-hairline:var(--sole-line);
  --border-strong:var(--sole-line-strong);
  --border-accent:var(--sole-steel-blue);
  --border-premium:var(--sole-gold);

  /* Ação */
  --action-primary:var(--sole-steel-blue);
  --action-primary-hover:var(--sole-steel-blue-hover);
  --action-primary-press:var(--sole-steel-blue-press);
  --action-ghost-hover:rgba(70,119,148,.08);
  --focus-ring:var(--sole-steel-blue);

  /* Acento institucional: dourado é traço, filete, preenchimento e hover de
     ícone. Quando precisa ser texto, é o --accent-premium-text. */
  --accent-premium:var(--sole-gold);
  --accent-premium-dim:var(--sole-gold-text);
  --accent-premium-text:var(--sole-gold-text);
  --accent-rule:var(--sole-gold);   /* traço dourado do dialeto site-pecas */

  /* Dados e performance (cor de TEXTO, AA em branco) */
  --data-positive:var(--sole-positive);
  --data-negative:var(--sole-negative);
  --data-neutral:var(--sole-muted);
  --status-positive:var(--data-positive);   /* apelidos de compatibilidade */
  --status-negative:var(--data-negative);
  --status-neutral:var(--data-neutral);

  /* Alertas: fundo + filete, sempre em par, sempre com texto escrito */
  --surface-alert-negative:rgba(139,58,58,.08);
  --border-alert-negative:var(--sole-negative);
  --surface-alert-warning:rgba(200,168,86,.12);
  --border-alert-warning:var(--sole-gold);
  --surface-alert-positive:rgba(58,107,74,.08);
  --border-alert-positive:var(--sole-positive);
  --surface-alert-info:rgba(70,119,148,.07);
  --border-alert-info:var(--sole-steel-blue);

  /* Selos */
  --badge-neutral-bg:#F2F2F2;       /* derivado */
  --badge-neutral-text:#595959;     /* derivado */
  --badge-shared-bg:rgba(70,119,148,.10);
  --badge-shared-text:var(--sole-steel-blue-hover);
  --badge-external-bg:rgba(200,168,86,.14);
  --badge-external-text:#6F5D27;    /* derivado do dourado de texto, para passar sobre a tinta dourada */

  /* Sinal de "gravado" — cor + texto, nunca só movimento */
  --state-saved-text:var(--sole-positive);
  --state-saved-bg:rgba(58,107,74,.10);

  /* Gráficos. Principal e par são definitivos; as 12 cores de classe de ativo
     são PROVISÓRIAS (em-aberto #8): validadas para daltonismo, não curadas. */
  --chart-primary:var(--sole-steel-blue);
  --chart-pair:var(--sole-gold-line);
  --chart-1:#256FA0;
  --chart-2:#CAA647;
  --chart-3:#8F4533;
  --chart-4:#C3781B;
  --chart-5:#249CB4;
  --chart-6:#1D6E42;
  --chart-7:#D484CD;
  --chart-8:#863C81;
  --chart-9:#25BF98;
  --chart-10:#787925;
  --chart-11:#584FA5;
  --chart-12:#8A8F98;

  /* Marca */
  --logo-marca:url("/static/sole/assets/logo-color.png"); /* @kind other */
  --logo-marca-branco:url("/static/sole/assets/logo-white.png"); /* @kind other */
  --logo-marca-proporcao:2.86; /* @kind other */
  --marca-nome:"Sole Capital Gestora de Recursos Ltda."; /* @kind other */
}

/* ═══ Tema escuro opcional ═══════════════════════════════════════════════
   Uso: dashboards de mesa e monitoração, apresentação escura, peça noturna.
   Nunca é o padrão. Fontes continuam Montserrat + Inter.
   O Steel Blue dá só 3,7:1 sobre o fundo: serve de botão e linha, não de
   texto — o texto de acento é o Blue Light do manual antigo. Aqui o dourado
   PODE ser texto (7,8:1). */
[data-theme="escuro"]{
  --surface-canvas:var(--sole-night);
  --surface-raised:var(--sole-night-raised);
  --surface-card:var(--sole-night-raised);
  --surface-page:var(--sole-night);
  --surface-sunken:var(--sole-night-deep);
  --surface-inset:#1F2530;          /* derivado */
  --surface-inset-soft:var(--sole-night-raised);
  --surface-dark:var(--sole-night-deep);
  --surface-inverse:var(--sole-night-text);
  --surface-overlay:rgba(0,0,0,.55);

  --text-heading:var(--sole-white);
  --text-body:var(--sole-night-text);
  --text-paragraph:var(--sole-night-text);
  --text-muted:var(--sole-night-muted);
  --text-subtle:var(--sole-night-muted);
  --text-accent:var(--sole-night-accent);
  --text-label:var(--sole-night-accent);
  --text-inverse:var(--sole-night);

  --border-hairline:var(--sole-night-line);
  --border-strong:#3A4250;          /* derivado */

  --action-ghost-hover:rgba(110,170,220,.12);
  --focus-ring:var(--sole-night-accent);

  --accent-premium-dim:#8E7A45;     /* derivado: filete dourado discreto */
  --accent-premium-text:var(--sole-gold);

  --data-positive:#6FAF8C;          /* derivado */
  --data-negative:#D98A8A;          /* derivado */
  --data-neutral:var(--sole-night-muted);

  --badge-neutral-bg:rgba(255,255,255,.06);
  --badge-neutral-text:var(--sole-night-muted);
  --badge-shared-bg:rgba(110,170,220,.14);
  --badge-shared-text:var(--sole-night-accent);
  --badge-external-bg:rgba(200,168,86,.14);
  --badge-external-text:var(--sole-gold);

  --state-saved-text:#6FAF8C;
  --state-saved-bg:rgba(111,175,140,.14);

  --logo-marca:url("/static/sole/assets/logo-white.png"); /* @kind other */
}

/* ── sole/tokens/typography.css ── */
:root{
  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-display:700;

  /* Escala tipográfica */
  --size-display-xl:56px;
  --size-display-lg:44px;
  --size-display-md:34px;
  --size-display-sm:28px;
  --size-title:22px;
  --size-body-lg:18px;
  --size-body:16px;
  --size-body-sm:14px;
  --size-caption:13px;
  --size-label:11px;

  --leading-display:1.15;
  --leading-title:1.3;
  --leading-body:1.6;              /* brandbook: Inter, line-height 1.6 */
  --leading-tight:1.2;

  --tracking-display:0;
  --tracking-display-site:1px;     /* títulos em caixa alta, só no dialeto site-pecas */
  --tracking-body:0;
  --tracking-label:.16em;          /* micro-rótulo: 01. COMECE POR AQUI */
  --tracking-button-site:.12em;    /* botão seco em caixa alta, só no site */
  --tracking-wordmark:.42em;       /* "capital" no logotipo */

  /* Dados alinham dígito com dígito */
  --numeric:tabular-nums;

  /* Papéis compostos */
  --type-display:var(--weight-display) var(--size-display-lg)/var(--leading-display) var(--font-display);
  --type-title:var(--weight-display) var(--size-title)/var(--leading-title) var(--font-display);
  --type-body:var(--weight-regular) var(--size-body)/var(--leading-body) var(--font-body);
  --type-label:var(--weight-semibold) var(--size-label)/1.4 var(--font-body);
  --type-button:var(--weight-medium) var(--size-body-sm)/1.2 var(--font-body);
}

/* ── sole/tokens/spacing.css ── */
:root{
  --space-0:0px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;
  --space-section-site:100px;      /* brandbook: seções de 100px no desktop */

  /* Alturas de controle: uma por nível de ação */
  --control-h-page:40px;   /* app: ação de página e campo de formulário */
  --control-h-row:32px;    /* app: ação dentro de linha de lista ou célula */
  --control-h-site:48px;   /* site e peças: botão seco em caixa alta */
  --control-icon:14px;     /* ícone dentro de controle */
  --touch-min:44px;        /* alvo mínimo de toque (apresentação no celular) */

  /* Grid e medidas */
  --grid-columns:12;
  --measure-text:64ch;
  --gutter-page:32px;
  --gutter-page-wide:64px;
  --max-content:1200px;
  --logo-clearspace:24px;  /* brandbook pág. 4: safe area margin 24px */
}

/* ── sole/tokens/shape.css ── */
:root{
  /* Raios por dialeto. App interno: controles 4px, painéis 6px (o que o FP já
     usa). Site e peças: seco, 0 — "bordas secas e precisas" (brandbook pág. 8). */
  --radius-none:0px;
  --radius-ctrl:4px;     /* botão, campo, select, selo — app */
  --radius-panel:6px;    /* painel, card, diálogo — app */
  --radius-site:0px;     /* tudo — site, peças, apresentação */
  --radius-sm:4px;       /* apelidos de compatibilidade */
  --radius-md:6px;
  --radius-lg:8px;

  --border-width-hairline:1px;
  --border-width-accent:2px;
  --border-width-panel-site:4px;   /* filete no topo do painel de números, só no site */

  --rule-thin:1px solid var(--border-hairline);
  --rule-accent:1px solid var(--border-strong);
  --rule-gold-site:32px;           /* comprimento do traço dourado antes do rótulo, site */
}

/* ── sole/tokens/elevation.css ── */
:root{
  /* A marca separa planos por filete e valor, não por sombra. */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(26,26,26,.06);
  --shadow-raised:0 8px 24px rgba(26,26,26,.10);
  --shadow-overlay:0 24px 64px rgba(26,26,26,.18);
  --shadow-focus:0 0 0 3px rgba(70,119,148,.22);

  /* A única gradação permitida: scrim funcional para texto sobre foto. */
  --scrim-lateral:linear-gradient(90deg,rgba(12,16,20,.78) 0%,rgba(12,16,20,.52) 48%,rgba(12,16,20,.12) 100%); /* @kind other */
  --scrim-baixo:linear-gradient(0deg,rgba(12,16,20,.62) 0%,rgba(12,16,20,0) 45%); /* @kind other */
}

/* ── sole/tokens/motion.css ── */
:root{
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:220ms; /* @kind other */
  --duration-slow:360ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.25,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-color:color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);
  --transition-fade:opacity var(--duration-base) var(--ease-out);
}

/* ── sole/tokens/brands.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   Camada de marca — Mirante Investimentos.

   A Sole é o padrão (tokens/colors.css, sem atributo nenhum). A Mirante
   redeclara os MESMOS nomes semânticos; uma folha de tela consome nome de
   token e nunca hex, e é isso que faz a tela sobreviver à troca de marca.

   Escopo: `[data-brand="mirante"]` para os protótipos deste sistema;
   `.ds-mirante` (no <html> ou no <body>) é o mecanismo que o app FP já usa,
   aplicado por script no <head> para a marca não piscar no primeiro quadro.

   A Mirante não tem manual próprio (ver marcas/mirante.md): herda fontes,
   raios, ícones e dialetos da Sole e troca a paleta — verde #0F6E56 /
   #085041, ocre #BA7517, neutros quentes. Sem fotografia e sem tema escuro
   definidos (em-aberto #10 e #11).
   ═══════════════════════════════════════════════════════════════════════ */

[data-brand="mirante"],:root.ds-mirante,body.ds-mirante{
  /* Superfícies: neutros quentes */
  --surface-canvas:#FFFFFF;
  --surface-raised:#FFFFFF;
  --surface-card:#FFFFFF;
  --surface-page:#F7F7F5;
  --surface-inset:#F7F5EF;
  --surface-inset-soft:#F7F6F2;
  --surface-sunken:#EFEEE9;
  --surface-dark:#085041;           /* na Mirante o cromo escuro é verde, não quase-preto */
  --surface-inverse:#085041;
  --surface-overlay:rgba(26,26,26,.40);

  --text-heading:#1A1A1A;
  --text-body:#1A1A1A;
  --text-paragraph:#555550;
  --text-muted:#555550;
  --text-subtle:#555550;
  --text-label:#0F6E56;
  --text-accent:#0F6E56;
  --text-on-action:#FFFFFF;
  --text-on-accent:#FFFFFF;
  --text-inverse:#FFFFFF;

  --border-hairline:#D9D8D3;
  --border-strong:#BDBCB5;
  --border-accent:#0F6E56;
  --border-premium:#BA7517;

  /* Hover escurece, como na Sole: o #1D9E75 que o app usava para clarear
     segura o texto branco só em 3,4:1. Ele segue como anel de foco. */
  --action-primary:#0F6E56;
  --action-primary-hover:#0C5C48;   /* derivado: escurece, como a Sole — o #1D9E75 reprovava AA */
  --action-primary-press:#085041;
  --action-ghost-hover:rgba(15,110,86,.10);
  --focus-ring:#1D9E75;

  --accent-premium:#BA7517;
  --accent-premium-dim:#8C5811;
  --accent-premium-text:#8C5811;
  --accent-rule:#BA7517;

  /* Na Mirante o verde é a cor de AÇÃO, então o verde de performance é mais
     escuro e menos saturado que o botão — número positivo não pode parecer
     um botão, e botão não pode parecer resultado. */
  --data-positive:#157F5F;
  --data-negative:#B03A39;          /* derivado: o #E24B4A do app dá 3,9:1 como texto */
  --data-neutral:#66665F;           /* derivado: o #7a7a72 de antes dava 4,3:1 */

  --surface-alert-negative:rgba(226,75,74,.10);
  --border-alert-negative:#E24B4A;
  --surface-alert-warning:rgba(186,117,23,.12);
  --border-alert-warning:#BA7517;
  --surface-alert-positive:rgba(21,127,95,.10);
  --border-alert-positive:#157F5F;
  --surface-alert-info:rgba(15,110,86,.08);
  --border-alert-info:#0F6E56;

  --badge-neutral-bg:#F1F0EA;
  --badge-neutral-text:#555550;
  --badge-shared-bg:rgba(15,110,86,.12);
  --badge-shared-text:#085041;
  --badge-external-bg:rgba(186,117,23,.14);
  --badge-external-text:#8C5811;

  --state-saved-text:#0F6E56;
  --state-saved-bg:rgba(15,110,86,.10);

  /* Gráficos: principal e par da Mirante. As 12 de classe de ativo são as
     da Sole, provisórias (em-aberto #8). */
  --chart-primary:#0F6E56;
  --chart-pair:#BA7517;

  --logo-marca:url("/static/sole/assets/logo-mirante-color.png"); /* @kind other */
  --logo-marca-branco:url("/static/sole/assets/logo-mirante-white.png"); /* @kind other */
  --logo-marca-proporcao:3.13; /* @kind other */
  --marca-nome:"Mirante Investimentos"; /* @kind other */
}

/* ── sole/tokens/base.css ── */
body{background:var(--surface-canvas);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-heading);letter-spacing:var(--tracking-display);line-height:var(--leading-display);margin:0}
table,.num{font-variant-numeric:var(--numeric)}
a{color:var(--text-accent);text-decoration:none;transition:var(--transition-color)}
a:hover{color:var(--action-primary-hover);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--surface-inset);color:var(--text-heading)}
*:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}