/* Design System Razach Technology — token bundle.
 *
 * Cores e tipografia saem do manual "identidade visual Razach" (agosto/2026).
 * O manual fixa SEIS cores e duas famílias; tudo o mais aqui é extensão de
 * interface — neutros, tons claros de Petróleo e as três semânticas —, feita
 * na mesma família de croma e com contraste AA conferido contra o fundo em que
 * cada uma é usada. Quando o manual e este arquivo divergirem, o manual manda.
 *
 * Archivo é variável nos dois eixos que o manual usa: `wdth` (largura) e
 * `wght` (peso). Por isso o pedido ao Google Fonts traz a faixa dos eixos, e
 * não uma lista de pesos — é o que permite `font-variation-settings:'wdth' 110`
 * nos títulos e 125 no logotipo.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
  /* --- as seis oficiais ------------------------------------------------- */
  --rz-ciano:   #6FCBCE;   /* Ciano Ártico     — destaque sobre fundo escuro */
  --rz-turquesa:#35989F;   /* Turquesa         — apoio, ponta do gradiente   */
  --rz-petroleo:#1B6470;   /* Petróleo         — ação principal, links       */
  --rz-profundo:#10363B;   /* Petróleo Profundo— barra do topo               */
  --rz-grafite: #0C1719;   /* Grafite          — texto forte                 */
  --rz-nevoa:   #F4F7F7;   /* Névoa            — fundo da página             */
  --rz-branco:  #ffffff;
  --rz-gradiente: linear-gradient(120deg, #6FCBCE 0%, #1B6470 100%);

  /* --- derivadas: tons claros de Petróleo ------------------------------- */
  /* Servem ao estado "escolhido" — pastilha do menu, cartão de filtro ligado,
     fundo de chip. Petróleo puro nesses lugares seria um botão, não um estado. */
  --rz-petroleo-050:#E8F5F8;
  --rz-petroleo-100:#D5E7EA;
  --rz-petroleo-200:#B6D0D5;
  --rz-petroleo-escuro:#154F59;   /* hover do botão primário */

  /* --- derivadas: neutros frios ---------------------------------------- */
  --rz-sunken:     #EDF2F3;
  --rz-linha-suave:#DEE5E6;
  --rz-linha:      #CAD4D5;
  --rz-linha-forte:#B1BDBF;
  --rz-texto-corpo:#324042;   /* 10,8:1 sobre branco */
  /* 5,7:1 sobre branco e 5,05:1 sobre o sunken do cabecalho de tabela. O tom
     anterior (#6A7779) dava 4,11:1 ali — reprovado para texto de 10px. */
  --rz-texto-fraco:#5C696A;
  --rz-zebra:      #FBFCFC;

  /* --- derivadas: semânticas ------------------------------------------- */
  /* Mesma disciplina de croma das oficiais, hue variando. Cada par
     texto/fundo passa de 4,5:1. */
  --rz-ok:#227C45;       --rz-ok-bg:#E6F6E9;       --rz-ok-borda:#C8E3CE;
  --rz-atencao:#9C5F00;  --rz-atencao-bg:#FCEFDF;  --rz-atencao-borda:#EED7BC;
  --rz-erro:#AE453D;     --rz-erro-bg:#FFEBE7;     --rz-erro-borda:#F9D0CA;

  /* --- papéis (o que o resto do CSS consome) ---------------------------- */
  /* A cor principal é configurável por instalação (Configurações → Marca); o
     base.html sobrescreve --color-primary depois deste arquivo. Por isso tudo
     o que deve acompanhar a marca lê --color-primary, e não --rz-petroleo. */
  --color-primary:var(--rz-petroleo); --color-primary-hover:var(--rz-petroleo-escuro);
  --color-primary-active:var(--rz-profundo); --color-primary-soft:var(--rz-petroleo-050);
  --color-secondary:var(--rz-turquesa); --color-secondary-hover:var(--rz-petroleo);
  --color-secondary-soft:var(--rz-petroleo-050);

  --text-strong:var(--rz-grafite); --text-body:var(--rz-texto-corpo);
  --text-muted:var(--rz-texto-fraco); --text-on-brand:var(--rz-branco);
  --text-link:var(--rz-petroleo);

  --surface-page:var(--rz-nevoa); --surface-card:var(--rz-branco);
  --surface-sunken:var(--rz-sunken); --surface-brand:var(--rz-petroleo);
  --surface-brand-deep:var(--rz-profundo);

  --border-subtle:var(--rz-linha-suave); --border-default:var(--rz-linha);
  --border-strong:var(--rz-linha-forte);
  --focus-ring: color-mix(in srgb, var(--color-primary) 26%, transparent);

  --gradient-brand: var(--rz-gradiente);
  --gradient-hero: linear-gradient(135deg, var(--rz-grafite) 0%, var(--rz-profundo) 45%, var(--rz-petroleo) 100%);
  --gradient-soft: linear-gradient(120deg, var(--rz-petroleo-050) 0%, var(--rz-nevoa) 100%);

  /* --- tipografia ------------------------------------------------------- */
  /* Uma família de texto (Archivo) e uma de dados (IBM Plex Mono). O eixo de
     largura faz o papel que noutro projeto pediria uma segunda família. */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wdth-logo:125; --wdth-titulo:110; --wdth-texto:100;

  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:3.75rem; --text-5xl:4.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800; --weight-black:900;
  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.55; --leading-relaxed:1.7;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em;
  /* 0,16em é a entreletra que o manual fixa para rótulo em caixa alta. */
  --tracking-caps:0.16em;

  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;
  --container:1240px; --container-wide:1360px; --container-text:720px;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-2xl:32px; --radius-pill:999px;
  --border-width:1px; --border-hair:1px solid var(--border-subtle);
  --shadow-xs:0 1px 2px rgba(12,23,25,0.05); --shadow-sm:0 2px 6px rgba(12,23,25,0.06);
  --shadow-md:0 8px 22px rgba(12,23,25,0.10); --shadow-lg:0 18px 46px rgba(12,23,25,0.16);
  --shadow-brand:0 14px 34px rgba(27,100,112,0.28); --shadow-focus:0 0 0 3px var(--focus-ring);
  --ease-standard: cubic-bezier(0.22,0.61,0.36,1); --ease-out: cubic-bezier(0.16,1,0.3,1);
  --dur-fast:130ms; --dur-base:210ms; --dur-slow:340ms; --transition-base: all var(--dur-base) var(--ease-standard);
}