/* ============================================================
   DESIGN SYSTEM OLLEM — tokens CSS  v1.0.0
   Fonte: Guia de Marca OLLEM (Set/2024)
   Uso:  <link rel="stylesheet" href="ollem-tokens.css">
   Fonte tipográfica: https://fonts.google.com/specimen/Montserrat
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* ---- CORES DA MARCA (valores literais do manual) ---- */
  --ollem-verde:   #11C90A;   /* Pantone 861 C · CMYK 76/0/100/0 · cor principal */
  --ollem-lima:    #8EF705;   /* Pantone 375 C · CMYK 47/0/100/0 · acento */
  --ollem-grafite: #606062;   /* CMYK 0/0/0/80 · cinza do logotipo */
  --ollem-verde-profundo: #00A819;
  --ollem-cinza-medio:    #666666;
  --ollem-cinza-escuro:   #424242;
  --ollem-cinza-claro:    #999999;


  /* ---- escala verde ---- */
  --verde-50: #ECFFEA;
  --verde-100: #C9F0C4;
  --verde-200: #9AE593;
  --verde-300: #61D959;
  --verde-400: #11C90A;
  --verde-500: #00AF00;
  --verde-600: #009400;
  --verde-700: #007800;
  --verde-800: #005D00;
  --verde-900: #004300;
  --verde-950: #002A00;

  /* ---- escala lima ---- */
  --lima-50: #EDFFE3;
  --lima-100: #D5FBBE;
  --lima-200: #B4F982;
  --lima-300: #8EF705;
  --lima-400: #59DD00;
  --lima-500: #2CBF00;
  --lima-600: #00A000;
  --lima-700: #008100;
  --lima-800: #006200;
  --lima-900: #004500;
  --lima-950: #002900;

  /* ---- escala neutro ---- */
  --neutro-0: #FFFFFF;
  --neutro-50: #F8F8F8;
  --neutro-100: #DDDDDD;
  --neutro-200: #C3C3C3;
  --neutro-300: #A9A9AA;
  --neutro-400: #909091;
  --neutro-500: #787878;
  --neutro-600: #606062;
  --neutro-700: #4F4F4F;
  --neutro-800: #2D2D2D;
  --neutro-900: #1A1A1A;
  --neutro-950: #0D0D0D;

  /* ---- escala atencao ---- */
  --atencao-50: #FFF7E9;
  --atencao-100: #FCE4C7;
  --atencao-200: #FCCF98;
  --atencao-300: #FCB961;
  --atencao-400: #F5A524;
  --atencao-500: #D98700;
  --atencao-600: #B96B00;
  --atencao-700: #975300;
  --atencao-800: #753C00;
  --atencao-900: #542800;
  --atencao-950: #351400;

  /* ---- escala erro ---- */
  --erro-50: #FFF2F1;
  --erro-100: #FFD4D0;
  --erro-200: #FFB0AB;
  --erro-300: #FF8985;
  --erro-400: #FB6565;
  --erro-500: #E5484D;
  --erro-600: #C72F38;
  --erro-700: #A51D29;
  --erro-800: #820F1C;
  --erro-900: #610410;
  --erro-950: #410006;

  /* ---- escala info ---- */
  --info-50: #EEF9FF;
  --info-100: #CAE2FF;
  --info-200: #9FCBFF;
  --info-300: #71B1FF;
  --info-400: #4998FF;
  --info-500: #2B7FFF;
  --info-600: #1267E1;
  --info-700: #0151BC;
  --info-800: #003D96;
  --info-900: #002B71;
  --info-950: #00194D;

  /* ---- TOKENS SEMÂNTICOS (use estes no dia a dia) ---- */
  --c-surface: #FFFFFF;  /* Fundo padrão de documentos, páginas e slides claros */
  --c-surface-sutil: #F8F8F8;  /* Fundo de seções alternadas, cards, zebra de tabela */
  --c-surface-marca: #11C90A;  /* Blocos de destaque da marca (capas, faixas, CTA) */
  --c-surface-marca-deep: #00A819;  /* Fundo verde institucional quando precisar de texto branco */
  --c-surface-escura: #1A1A1A;  /* Fundo escuro (cabeçalhos de tabela, capas, dark mode) */
  --c-surface-escura-alt: #2D2D2D;  /* Segundo nível de fundo escuro */
  --c-texto: #1A1A1A;  /* Texto corrido e títulos sobre fundo claro */
  --c-texto-secundario: #4F4F4F;  /* Legendas, apoio, metadados */
  --c-texto-suave: #606062;  /* Texto terciário; cinza institucional do logotipo */
  --c-texto-invertido: #FFFFFF;  /* Texto sobre superfície escura ou verde-profundo */
  --c-texto-marca: #007800;  /* Verde legível para texto/links sobre fundo BRANCO */
  --c-texto-sobre-verde: #1A1A1A;  /* Texto sobre o verde #11C90A — deve ser ESCURO, nunca branco */
  --c-borda: #C3C3C3;  /* Bordas de card, tabela, input */
  --c-borda-forte: #909091;  /* Divisores de seção, bordas em destaque */
  --c-regua-marca: #11C90A;  /* Régua/filete verde sob títulos (assinatura visual do manual) */
  --c-acao: #007800;  /* Botão primário / link — texto branco por cima */
  --c-acao-hover: #005D00;  /* Estado hover do botão primário */
  --c-acao-foco: #11C90A;  /* Anel de foco (outline 3px) */
  --c-acao-suave: #ECFFEA;  /* Fundo de botão secundário / chip */
  --c-sucesso: #007800;  /* Confirmações, valores positivos */
  --c-sucesso-fundo: #ECFFEA;  /* Fundo de alerta de sucesso */
  --c-atencao: #975300;  /* Avisos, pendências */
  --c-atencao-fundo: #FFF7E9;  /* Fundo de alerta de atenção */
  --c-erro: #A51D29;  /* Erros, valores negativos */
  --c-erro-fundo: #FFF2F1;  /* Fundo de alerta de erro */
  --c-info: #0151BC;  /* Informação neutra, notas */
  --c-info-fundo: #EEF9FF;  /* Fundo de alerta informativo */

  /* ---- TIPOGRAFIA ---- */
  --font-geral: Montserrat, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
  --fs-display: 60px;  --lh-display: 1.05;  --fw-display: 800;
  --fs-h1: 44px;  --lh-h1: 1.1;  --fw-h1: 700;
  --fs-h2: 32px;  --lh-h2: 1.15;  --fw-h2: 700;
  --fs-h3: 24px;  --lh-h3: 1.25;  --fw-h3: 600;
  --fs-h4: 20px;  --lh-h4: 1.3;  --fw-h4: 600;
  --fs-corpo-g: 18px;  --lh-corpo-g: 1.6;  --fw-corpo-g: 400;
  --fs-corpo: 16px;  --lh-corpo: 1.6;  --fw-corpo: 400;
  --fs-corpo-p: 14px;  --lh-corpo-p: 1.55;  --fw-corpo-p: 400;
  --fs-legenda: 12px;  --lh-legenda: 1.45;  --fw-legenda: 500;
  --fs-etiqueta: 12px;  --lh-etiqueta: 1.2;  --fw-etiqueta: 700;

  /* ---- ESPAÇO / RAIO / SOMBRA ---- */
  --sp-0: 0px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --r-nenhum: 0px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(26,26,26,.06), 0 1px 3px rgba(26,26,26,.08);
  --sh-md: 0 4px 12px rgba(26,26,26,.08), 0 2px 4px rgba(26,26,26,.04);
  --sh-lg: 0 12px 32px rgba(26,26,26,.10), 0 4px 8px rgba(26,26,26,.05);
  --sh-marca: 0 8px 24px rgba(17,201,10,.22);
  --container: 1200px;
  --gutter: 24px;
}

/* ============ TEMA ESCURO ============ */
[data-tema="escuro"] {
  --c-surface: #1A1A1A;
  --c-surface-sutil: #2D2D2D;
  --c-texto: #F8F8F8;
  --c-texto-secundario: #C3C3C3;
  --c-texto-suave: #A9A9AA;
  --c-borda: #4F4F4F;
  --c-borda-forte: #606062;
  --c-texto-marca: #61D959;   /* verde claro: legível sobre fundo escuro */
  --c-acao: #11C90A;
  --c-acao-hover: #61D959;
}

/* ============ BASE ============ */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-geral);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--c-texto);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-h4); }
a { color: var(--c-texto-marca); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--c-acao-foco); outline-offset: 2px; border-radius: var(--r-sm); }

/* ============ COMPONENTES ============ */

/* Régua verde sob título — assinatura visual do manual Ollem */
.ollem-regua { position: relative; padding-bottom: var(--sp-3); }
.ollem-regua::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 72px; height: 4px; background: var(--c-regua-marca); border-radius: 2px;
}

.ollem-etiqueta {
  display: inline-block; font-size: var(--fs-etiqueta); font-weight: var(--fw-etiqueta);
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-texto-marca);
}

.ollem-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 12px 22px; border-radius: var(--r-pill); border: 2px solid transparent;
  background: var(--c-acao); color: #fff; text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}
.ollem-btn:hover { background: var(--c-acao-hover); }
.ollem-btn:active { transform: translateY(1px); }
.ollem-btn--secundario { background: var(--c-acao-suave); color: var(--c-texto-marca); border-color: var(--verde-200); }
.ollem-btn--fantasma  { background: transparent; color: var(--c-texto-marca); border-color: currentColor; }

.ollem-card {
  background: var(--c-surface); border: 1px solid var(--c-borda);
  border-radius: var(--r-lg); padding: var(--sp-5); box-shadow: var(--sh-sm);
}
.ollem-card--destaque { border-color: var(--verde-200); box-shadow: var(--sh-marca); }

.ollem-chip {
  display: inline-block; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-legenda); font-weight: 600;
  background: var(--c-acao-suave); color: var(--c-texto-marca);
}

.ollem-tabela { width: 100%; border-collapse: collapse; font-size: var(--fs-corpo-p); }
.ollem-tabela th {
  background: var(--c-surface-escura); color: var(--ollem-verde);
  text-align: left; padding: 12px 14px; font-weight: 700;
  font-size: var(--fs-legenda); letter-spacing: .04em; text-transform: uppercase;
}
.ollem-tabela td { padding: 11px 14px; border-bottom: 1px solid var(--c-borda); }
.ollem-tabela tbody tr:nth-child(even) { background: var(--verde-50); }
.ollem-tabela tfoot td { background: var(--c-acao); color: #fff; font-weight: 700; }

/* Faixa de marca: use o verde profundo quando o texto for branco */
.ollem-faixa { background: var(--c-surface-marca-deep); color: #fff; padding: var(--sp-6) var(--sp-5); }
.ollem-faixa--clara { background: var(--c-surface-marca); color: var(--c-texto-sobre-verde); }

/* Grafismo de arco (máscara de imagem característica da Ollem) */
.ollem-arco { -webkit-mask: radial-gradient(circle at 0% 100%, #000 99%, transparent 100%);
              mask: radial-gradient(circle at 0% 100%, #000 99%, transparent 100%); }
.ollem-diagonal { clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); }

/* Alertas */
.ollem-alerta { border-left: 4px solid; border-radius: var(--r-sm); padding: var(--sp-4); }
.ollem-alerta--sucesso { background: var(--c-sucesso-fundo); border-color: var(--c-sucesso); }
.ollem-alerta--atencao { background: var(--c-atencao-fundo); border-color: var(--c-atencao); }
.ollem-alerta--erro    { background: var(--c-erro-fundo);    border-color: var(--c-erro); }
.ollem-alerta--info    { background: var(--c-info-fundo);    border-color: var(--c-info); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }