/* ============================================================
   SWISZ DESIGN TOKENS — fundação do design system (Manual de Identidade 2025)
   Duas camadas: BRAND (fixa, vem do manual) → SEMÂNTICA (o que os componentes usam).
   Carrega ANTES do styles.css; o :root antigo vira alias destes tokens.
   ============================================================ */

/* Liberation Serif Italic = a fonte display da MARCA (a wordmark "Swisz" é ela).
   Self-host (OFL). Itálico é o uso canônico — regular não é carregado de propósito. */
@font-face {
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-Italic.ttf') format('truetype');
  font-style: italic; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Liberation Serif';
  src: url('/fonts/LiberationSerif-BoldItalic.ttf') format('truetype');
  font-style: italic; font-weight: 700; font-display: swap;
}

:root {
  /* ── BRAND (paleta oficial 2025 — hex conferidos por pixel-sampling do manual) ── */
  --sw-pumpkin:    #F27127;   /* cor principal — AÇÃO (CTA, ativo, números-chave). Usar com parcimônia */
  --sw-chocolate:  #D9501E;   /* hover do CTA, vermelho "de marca" */
  --sw-sienna:     #E87C55;   /* acento secundário quente */
  --sw-sandy:      #F69863;   /* gráficos / decoração */
  --sw-arapawa:    #255561;   /* TINTA da marca — chrome, títulos, ícones */
  --sw-arapawa-deep:#1B4350;  /* petróleo profundo (gradiente do chrome) */
  --sw-netuno:     #6E9CA7;   /* azul suave — info, texto secundário sobre escuro */
  --sw-cinderela:  #FDD8C5;   /* blush — superfícies suaves, chips */
  --sw-bridesmaid: #F9DED5;   /* blush claro — hover/seleção suave */
  --sw-pattens:    #CDE6EB;   /* azul gelo — chips frios, texto sobre petróleo */

  /* ── SEMÂNTICA: superfícies e tinta ── */
  --bg:        #FBF8F5;
  --surface:   #FFFFFF;
  --surface-2: #FAF6F2;
  --surface-3: #F4EDE6;      /* (existia como token fantasma — agora definido) */
  --ink:       #233238;
  --text:      #233238;       /* alias legado */
  --ink-soft:  #4A5B61;
  --text-soft: #4A5B61;       /* legado — ↑contraste (era #5C6B70) */
  --ink-muted: #6B7B81;
  --muted:     #6B7B81;       /* legado — ↑contraste AA (era #8A989D ≈3:1) */
  --line:      #ECE4DC;
  --line-1:    #F0EBE6;       /* (fantasma → definido: divisor mais suave que --line) */
  --line-2:    #E3D9CF;

  /* ── SEMÂNTICA: ação e chrome ── */
  --primary:       var(--sw-pumpkin);
  --primary-hover: var(--sw-chocolate);
  --chrome:        var(--sw-arapawa);
  --chrome-deep:   var(--sw-arapawa-deep);
  --on-chrome:     var(--sw-pattens);
  --netuno-2:      #5A8893;   /* (fantasma → definido: netuno mais escuro p/ hover) */

  /* ── SEMÂNTICA: STATUS — família única (substitui 7 verdes, 6 vermelhos e 7 âmbares) ── */
  --ok:        #0F766E;  --ok-bg:     #E6F4F2;
  --warn:      #B45309;  --warn-bg:   #FBF0DC;
  --danger:    #C2410C;  --danger-bg: #FCEAE3;
  --info:      var(--sw-netuno); --info-bg: #EAF3F5;

  /* ── Tipografia ── */
  --font-ui:      'Montserrat', -apple-system, system-ui, sans-serif;
  --font-display: 'Liberation Serif', 'PT Serif', Georgia, serif;   /* usar com font-style: italic */
  --font-mono:    'SF Mono', Menlo, Consolas, monospace;
  --fs-display: 27px;   /* título de página (serif itálico) */
  --fs-h1:      21px;
  --fs-h2:      16px;
  --fs-body:    13.5px;
  --fs-sm:      12.5px;
  --fs-xs:      11px;

  /* ── Espaçamento / forma / sombra / camadas ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;
  --radius:      14px;
  --radius-md:   12px;        /* (fantasma → definido) */
  --radius-sm:   10px;
  --radius-pill: 999px;
  --shadow:    0 1px 2px rgba(37, 85, 97, .04), 0 4px 16px rgba(37, 85, 97, .05);
  --shadow-lg: 0 8px 30px rgba(37, 85, 97, .12);
  --z-nav: 100; --z-drop: 1000; --z-modal: 2000; --z-toast: 3000;

  /* ── Aliases LEGADOS (o styles.css antigo usa estes nomes) ── */
  --pumpkin:    var(--sw-pumpkin);
  --chocolate:  var(--sw-chocolate);
  --sienna:     var(--sw-sienna);
  --sandy:      var(--sw-sandy);
  --arapawa:    var(--sw-arapawa);
  --arapawa-2:  var(--sw-arapawa-deep);
  --netuno:     var(--sw-netuno);
  --cinderela:  var(--sw-cinderela);
  --bridesmaid: var(--sw-bridesmaid);
  --pattens:    var(--sw-pattens);
  --sidebar-w:  244px;
}

/* Título de página da marca: serif ITÁLICO (a assinatura visual do redesign) */
.sw-display { font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: .2px; }

/* Foco visível ÚNICO (a11y): anel pattens com offset — aplicado globalmente a interativos */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sw-netuno);
  outline-offset: 2px;
  border-radius: 4px;
}