/* ========================================================================== 
   IBRALE Visual System — 00 Tokens
   Cores, larguras, sombras e decisões de identidade visual.

   Regra: cor de site identifica frente institucional; cor de tema orienta
   navegação interna. Não usar nth-child para governar cor.
   ========================================================================== */

:root {
  /* Sites do ecossistema */
  --site-ibrale: #2f6fed;
  --site-ibralc: #d77735;
  --site-slab: #0f766e;
  --site-autor: #475569;
  --site-ecossistema: #33413d;

  /* Temas internos do IBRALE */
  --tema-corpo: #2f6fed;
  --tema-linguagem: #7c3aed;
  --tema-convivencia: #0f766e;
  --tema-prevencao: #b45309;
  --tema-recursos: #475569;
  --tema-geral: #33413d;

  /* Compatibilidade com versões anteriores */
  --ibrale-blue: var(--site-ibrale);
  --ibrale-green: var(--site-slab);
  --ibrale-orange: var(--site-ibralc);
  --ibrale-slate: var(--site-autor);
  --ibrale-ecosystem: var(--site-ecossistema);

  /* Neutros */
  --ibrale-ink: #202827;
  --ibrale-text: #33413d;
  --ibrale-muted: #5f6865;
  --ibrale-border: #d8e3df;
  --ibrale-border-soft: #dfe8e4;
  --ibrale-soft: #f7faf8;
  --ibrale-white: #ffffff;

  /* Estados e fundos editoriais */
  --ibrale-blue-bg: #eaf3fb;
  --ibrale-blue-border: #93bfe7;
  --ibrale-blue-ink: #174b78;

  --ibrale-green-bg: #e8f6ef;
  --ibrale-green-border: #86cfae;
  --ibrale-green-ink: #14533f;

  --ibrale-amber-bg: #fff4df;
  --ibrale-amber-border: #e8b25d;
  --ibrale-amber-ink: #6b470d;

  --ibrale-purple-bg: #f0edfb;
  --ibrale-purple-border: #b7aee8;
  --ibrale-purple-ink: #463b86;

  /* Forma */
  --ibrale-radius-sm: 10px;
  --ibrale-radius-card: 16px;
  --ibrale-radius-panel: 20px;

  --ibrale-shadow-card:
    0 8px 22px rgba(22, 38, 34, 0.08),
    0 2px 7px rgba(22, 38, 34, 0.04);

  --ibrale-shadow-card-hover:
    0 14px 30px rgba(22, 38, 34, 0.12),
    0 4px 10px rgba(22, 38, 34, 0.06);

  --ibrale-shadow-panel:
    0 14px 34px rgba(22, 38, 34, 0.10),
    0 3px 10px rgba(22, 38, 34, 0.05);

  /* Layout */
  --ibrale-max-narrow: 920px;
  --ibrale-max: 1080px;
  --ibrale-max-wide: 1180px;
  --ibrale-max-text: 720px;

  --ibrale-gap-xs: 10px;
  --ibrale-gap-sm: 14px;
  --ibrale-gap: 22px;
  --ibrale-gap-lg: 34px;

  --ibrale-break-tablet: 980px;
  --ibrale-break-mobile: 760px;
}

/* --------------------------------------------------------------------------
   Tokens universais do ecossistema — 0.1.4-alpha
   -------------------------------------------------------------------------- */

:root {
  --eco-ink: var(--ibrale-ink);
  --eco-text: var(--ibrale-text);
  --eco-muted: var(--ibrale-muted);
  --eco-border: var(--ibrale-border);
  --eco-border-soft: var(--ibrale-border-soft);
  --eco-soft: var(--ibrale-soft);
  --eco-white: var(--ibrale-white);

  --eco-radius-sm: var(--ibrale-radius-sm);
  --eco-radius-card: var(--ibrale-radius-card);
  --eco-radius-panel: var(--ibrale-radius-panel);

  --eco-shadow-card: var(--ibrale-shadow-card);
  --eco-shadow-card-hover: var(--ibrale-shadow-card-hover);
  --eco-shadow-panel: var(--ibrale-shadow-panel);

  --eco-max-narrow: var(--ibrale-max-narrow);
  --eco-max: var(--ibrale-max);
  --eco-max-wide: var(--ibrale-max-wide);
  --eco-max-text: var(--ibrale-max-text);

  --eco-gap-xs: var(--ibrale-gap-xs);
  --eco-gap-sm: var(--ibrale-gap-sm);
  --eco-gap: var(--ibrale-gap);
  --eco-gap-lg: var(--ibrale-gap-lg);
}