/* =========================================================================
   tokens.css — fonte única de verdade do design system
   Ordem de carga obrigatória: tokens → base → components → page → [tela]
   ========================================================================= */

:root {
  /* ---- Cor -------------------------------------------------------- */
  --c-brand-50:  #eff6ff;
  --c-brand-100: #dbeafe;
  --c-brand-500: #3b82f6;
  --c-brand-600: #2563eb;   /* primária histórica do projeto */
  --c-brand-700: #1d4ed8;

  --c-bg:        #f8f9fa;
  --c-surface:   #ffffff;
  --c-surface-2: #f3f4f6;
  --c-surface-3: #e9ecef;

  --c-text:      #111827;
  --c-text-2:    #4b5563;
  --c-text-3:    #9ca3af;
  --c-text-on-brand: #ffffff;

  --c-border:        #e5e7eb;
  --c-border-strong: #d1d5db;

  --c-danger:  #dc2626;
  --c-danger-700: #b91c1c;
  --c-success: #16a34a;
  --c-warning: #d97706;

  /* ---- Espaçamento (base 4) --------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---- Raio ------------------------------------------------------- */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  /* ---- Sombra ----------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.06);
  --sh-2: 0 2px 8px rgba(0,0,0,.08);
  --sh-3: 0 8px 24px rgba(0,0,0,.12);
  --sh-4: 0 16px 48px rgba(0,0,0,.18);

  /* ---- Tipografia ------------------------------------------------- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 32px;
  --lh-tight: 1.2; --lh-normal: 1.5;

  /* ---- Z-index (mantém a escala já em uso no projeto) -------------- */
  --z-base: 1;
  --z-page-content: 5;
  --z-icons: 10;
  --z-page-ui: 15;
  --z-sidebar: 1000;
  --z-sidebar-overlay: 1001;
  --z-dropdown: 1400;
  --z-modal: 1500;
  --z-toast: 2000;

  /* ---- Interação -------------------------------------------------- */
  --touch-min: 44px;              /* WCAG 2.5.5 — alvo mínimo real */
  --t-fast: 120ms;
  --t-base: 180ms;
  --ease: cubic-bezier(.2,.8,.2,1);

  /* ---- Página do flipbook ----------------------------------------- */
  /* Sobrescrito pelo motor de flip a cada resize. 1 = escala natural
     (é o valor com que o builder sempre trabalha). */
  --page-scale: 1;
}

/* -------------------------------------------------------------------------
   Aliases de compatibilidade.
   O viewer atual usa --flipbook-*; apontamos para os tokens novos para não
   precisar reescrever todo o CSS legado de uma vez.
   ------------------------------------------------------------------------- */
:root {
  --flipbook-theme-color:  var(--c-brand-600);
  --flipbook-bg-color:     var(--c-bg);
  --flipbook-text-color:   var(--c-text);
  --flipbook-border-color: var(--c-border);
  --flipbook-card-bg:      var(--c-surface);
  --flipbook-shadow:       var(--sh-2);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-base: 0ms; }
}