/* ---------------------------------------------------------------------------
   ENERGISA — design tokens
   Every colour below was sampled from the official logo file, not estimated.
   Nothing else in the project may hard-code a colour.
   --------------------------------------------------------------------------- */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --teal-900: #0e3246;
  --teal-800: #11425c;
  --teal-700: #185470; /* wordmark: the institutional colour */
  --teal-600: #1d6688;
  --teal-500: #188cae; /* outer curve of the spiral */
  --teal-400: #46a6c2;
  --teal-200: #a9d4e2;
  --teal-050: #eef6f9;

  --orange-700: #c06f1c;
  --orange-600: #ed8b28; /* the dot in the spiral: signature, not surface */
  --orange-200: #fbddb9;
  --orange-050: #fdf4e9;

  /* The stamp is printed in one ink, brighter than the wordmark. It belongs
     to issued documents only — never to the interface. */
  --stamp-ink: #0185af;

  /* --- Neutrals --------------------------------------------------------- */
  --ink-900: #161d21;
  --ink-800: #2b3338; /* body text */
  --ink-600: #4d585f;
  --ink-400: #6a747a; /* #7b878e dava 3,53:1 como texto: nao chegava aos 4,5 */
  --ink-200: #c3cbd0;
  --line: #e3e7ea;
  --surface: #ffffff;
  --brand-paper: #ffffff; /* suporte neutro permanente para o logótipo, também em modo escuro */
  --surface-warm: #fafaf8;
  --surface-sunk: #f2f5f6;

  /* --- Status ----------------------------------------------------------- */
  --good-600: #1f7a4d;
  --good-050: #eaf5ef;
  --warn-600: #9f6605; /* #a66a05 dava 4,48:1 como texto: nao chegava */
  --warn-050: #fdf3e2;
  --bad-600: #b02a20;
  --bad-050: #fbeceb;

  /* --- Type ------------------------------------------------------------- */
  /* Served locally, never from a CDN: connections in Nampula are uneven and a
     font that does not arrive delays first paint. */
  --font-display: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  --text-xs: 0.88rem;
  --text-sm: 0.99rem;
  --text-base: 1rem;
  --text-lg: 1.13rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.7rem;
  --text-3xl: 2.15rem;
  --text-4xl: 2.75rem;

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-normal: 1.65;

  /* --- Space (steps of 4) ------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  /* --- Shape ------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(22, 29, 33, 0.06);
  --shadow: 0 2px 8px rgba(22, 29, 33, 0.08);
  --shadow-lg: 0 8px 28px rgba(22, 29, 33, 0.12);

  --container: 1180px;
  --container-narrow: 760px;

  /* --- Semantic aliases --------------------------------------------------- */
  --brand: var(--teal-700);
  --brand-bright: var(--teal-500);
  --accent: var(--orange-600);

  /* O laranja e 1,88% da tinta do logotipo (medido em energisa-logo.png, 39 286
     pixeis de tinta): assinatura, nao superficie. #ed8b28 sobre branco da
     2,52:1 -- abaixo dos 3:1 que a WCAG 2.2 pede a um contorno de foco e muito
     abaixo dos 4,5:1 do texto. Nenhum escurecimento que ainda seja o laranja da
     marca serve para as duas coisas, por isso a familia divide-se por funcao:

       --accent        o laranja cheio; so em fundos, pontos e tracos
       --accent-text   a mesma matiz escurecida ate carregar texto
       --accent-hover  o escurecimento maximo que ainda deixa ler tinta escura
       --focus-ring    o contorno do foco do teclado
       --on-accent     a tinta que se escreve POR CIMA do laranja

     --on-accent e um valor fixo e nao um alias de --ink-900 de proposito: como
     alias invertia-se em modo escuro e voltava a dar 2,5:1 sobre o laranja, que
     nao muda. */
  --accent-text: #a15f1b;
  --accent-hover: #c77522;
  --focus-ring: var(--orange-700);
  --on-accent: #161d21;

  /* A barra do topo, o rodape e as faixas de marca sao azul-escuro nos DOIS
     temas: o fundo nao se inverte. Mas o --teal-200 que estava a escrever por
     cima deles inverte-se (de #a9d4e2 para #1d4858 em modo escuro), e o par
     colapsava para 1,36:1 -- texto praticamente invisivel. Escrever sobre uma
     superficie fixa exige tinta fixa, por isso estes tres nao entram em
     nenhum bloco de modo escuro. */
  --brand-surface: #0e3246;
  --on-brand: #a9d4e2;        /* 8,45:1 sobre --brand-surface */
  --on-brand-strong: #eef6f9; /* 12,27:1 */

  --text: var(--ink-800);
  --text-quiet: var(--ink-600);
  --text-faint: var(--ink-400);
  --bg: var(--surface-warm);
  --bg-raised: var(--surface);
}

/* The site is light by default. Dark mode is honoured where the viewer's
   system asks for it, keeping the same brand hues at readable contrast. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink-900: #f3f6f7;
    --ink-800: #e2e8ea;
    --ink-600: #b3bec3;
    --ink-400: #8a969c;
    --ink-200: #4a555b;
    --line: #2a353b;
    --surface: #161e22;
    --surface-warm: #10171a;
    --surface-sunk: #1d272c;

    --teal-050: #13282f;
    --teal-200: #1d4858;
    --orange-050: #2a1e0f;
    /* Sobre fundo escuro o laranja cheio ja da 7,18:1, por isso o foco e o
       texto laranja recuperam o brilho da marca. --on-accent nao muda: o
       laranja por baixo dele continua o mesmo. */
    --accent-text: var(--orange-600);
    --focus-ring: var(--orange-600);

    /* Os tres estados eram fixos e a superficie por baixo deles inverte-se:
       em modo escuro o vermelho caia para 2,3:1. Clareados, mantendo a matiz. */
    --good-600: #33a16a;
    --warn-600: #c17e0d;
    --bad-600: #fd5245;


    --brand: var(--teal-400);
    --brand-bright: var(--teal-400);
    --text: var(--ink-800);
    --bg: var(--surface-warm);
    --bg-raised: var(--surface);
  }
}

:root[data-theme="dark"] {
  --ink-900: #f3f6f7;
  --ink-800: #e2e8ea;
  --ink-600: #b3bec3;
  --ink-400: #8a969c;
  --ink-200: #4a555b;
  --line: #2a353b;
  --surface: #161e22;
  --surface-warm: #10171a;
  --surface-sunk: #1d272c;

  --teal-050: #13282f;
  --teal-200: #1d4858;
  --orange-050: #2a1e0f;
  /* Sobre fundo escuro o laranja cheio ja da 7,18:1, por isso o foco e o
     texto laranja recuperam o brilho da marca. --on-accent nao muda: o
     laranja por baixo dele continua o mesmo. */
  --accent-text: var(--orange-600);
  --focus-ring: var(--orange-600);

  /* Os tres estados eram fixos e a superficie por baixo deles inverte-se:
     em modo escuro o vermelho caia para 2,3:1. Clareados, mantendo a matiz. */
  --good-600: #33a16a;
  --warn-600: #c17e0d;
  --bad-600: #fd5245;


  --brand: var(--teal-400);
  --brand-bright: var(--teal-400);
  --text: var(--ink-800);
  --bg: var(--surface-warm);
  --bg-raised: var(--surface);
}