/* ==========================================================================
   DESIGN TOKENS — Simao Tecnologia
   Fonte única da verdade para cores, tipografia, espaçamento, raio, sombra,
   container, breakpoints e transições. Nenhum componente deve usar valores
   soltos (hex, px aleatórios) — sempre referenciar um token daqui.
   ========================================================================== */

:root{
  /* ---- Paleta oficial da marca (Brandbook) — NÃO usar diretamente nos
     componentes. Sempre passar por um token semântico abaixo. ---- */
  --brand-regal-navy:   #193A67;
  --brand-steel-azure:  #014992;
  --brand-baltic-blue:  #125BA6;
  --brand-smart-blue:   #376DB5;
  --brand-frozen-lake:  #80CEF4;

  /* ---- Neutros de apoio (acessibilidade/legibilidade) ---- */
  --neutral-900: #10161d;
  --neutral-700: #3c4a5a;
  --neutral-500: #64748b;
  --neutral-300: #cbd5e1;
  --neutral-200: #e2e8f0;
  --neutral-100: #f3f6fa;
  --neutral-0:   #ffffff;

  /* ---- Cores semânticas de estado (independentes da marca) ---- */
  --state-success: #1f9d55;
  --state-warning: #b3801a;
  --state-danger:  #c0392b;

  /* ==========================================================
     TOKENS SEMÂNTICOS — usar estes nos componentes
     ========================================================== */
  --color-primary:        var(--brand-baltic-blue);
  --color-primary-hover:  var(--brand-regal-navy);
  --color-secondary:      var(--brand-smart-blue);
  --color-accent:         var(--brand-frozen-lake);

  --color-background:     var(--neutral-0);
  --color-surface:        var(--neutral-0);
  --color-surface-muted:  var(--neutral-100);

  --color-text:           var(--neutral-900);
  --color-text-secondary: var(--neutral-500);
  --color-border:         var(--neutral-200);

  --color-success: var(--state-success);
  --color-warning: var(--state-warning);
  --color-danger:  var(--state-danger);

  --color-inverse-text: var(--neutral-0);

  /* ---- Tipografia ----
     Fonte de marca (Geom Graphic / Avenir) ainda não disponível no projeto.
     --font-brand aponta para um fallback seguro hoje; quando os arquivos
     oficiais forem adicionados em public/assets/fonts/, basta declarar o
     @font-face em fonts.css (já preparado, comentado) — nenhum componente
     precisa ser alterado. */
  --font-brand: "Avenir Next", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --font-body:  Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs:   .75rem;
  --fs-sm:   .875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.5rem;
  --fs-2xl:  2rem;
  --fs-3xl:  2.75rem;

  /* ---- Espaçamento ---- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* ---- Raio ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---- Sombra ---- */
  --shadow-sm: 0 2px 8px rgba(16,22,29,.06);
  --shadow-md: 0 15px 40px rgba(16,22,29,.08);
  --shadow-lg: 0 25px 70px rgba(16,22,29,.10);

  /* ---- Container / layout ---- */
  --container-max: 1200px;

  /* ---- Breakpoints (referência — o grid do Bootstrap já cobre isso) ---- */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
  --bp-xxl: 1400px;

  /* ---- Transições ---- */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 250ms ease;
}