/* ============================================================
 * Alltec — Design Tokens (single source of truth)
 * ============================================================
 * Centraliza cores, espaçamento, tipografia, breakpoints, z-index,
 * shadows, radius e transições. Carregado em todos os HTMLs ANTES
 * de style.min.css e demais folhas próprias.
 *
 * Regras de uso:
 *  - Toda nova regra CSS DEVE consumir tokens (não cravar hex/px)
 *  - CSS legado (style.min.css/tema RD) NÃO é tocado; tokens convivem
 *  - Quando precisar derrubar valor do tema, use !important com token
 *  - Para mudar a marca, mexa SÓ neste arquivo
 *
 * Estrutura:
 *  1) Brand & cores neutras
 *  2) Espaçamento (escala 4px-base)
 *  3) Tipografia (família, tamanhos, line-height, weights)
 *  4) Breakpoints (mobile-first; usar --bp-* em @media via PostCSS futuro;
 *     enquanto isso, mantemos comentários canônicos)
 *  5) Z-index (escala explícita)
 *  6) Radius, shadows, transições, durations
 *  7) Componentes base (botão, card, container)
 * ============================================================ */

:root {
  /* ─── 1) BRAND & CORES ─────────────────────────────────────── */
  --color-brand: #cc1616;
  --color-brand-hover: #a81212;
  --color-brand-active: #8a0f0f;
  --color-brand-soft: #fef2f2;
  --color-brand-contrast: #ffffff;

  --color-accent-whatsapp: #25d366;
  --color-accent-whatsapp-hover: #1ebe57;

  --color-text: #1a1a1a;
  --color-text-secondary: #495057;   /* v2.11.1: Bootstrap gray-700 aligned (era #4a4a4a) */
  --color-text-muted: #6c757d;       /* Bootstrap gray-600 */
  --color-text-inverse: #ffffff;

  --color-heading: #1a1a1a;
  --color-link: var(--color-brand);
  --color-link-hover: var(--color-brand-hover);

  --color-bg: #ffffff;
  --color-bg-soft: #f8f9fa;          /* Bootstrap gray-100 */
  --color-bg-muted: #f3f4f6;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  --color-border: #e9ecef;           /* v2.11.1: Bootstrap gray-200 aligned (era #e5e7eb) */
  --color-border-strong: #d1d5db;
  --color-border-focus: var(--color-brand);

  --color-success: #16a34a;
  --color-warning: #f59e0b;
  --color-danger: #dc2626;
  --color-info: #2563eb;

  /* ─── 2) ESPAÇAMENTO (escala 4px-base) ─────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── 3) TIPOGRAFIA ────────────────────────────────────────── */
  --font-family-base: Montserrat, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-family-heading: var(--font-family-base);
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 17px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-4xl: 32px;
  --fs-5xl: 36px;
  --fs-6xl: 48px;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-relaxed: 1.65;
  --lh-loose: 1.75;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ─── 4) BREAKPOINTS (canônicos — Bootstrap-aligned) ──────── */
  /* Uso em @media: substituir manualmente até PostCSS adotar custom-media.
     SEMPRE usar estes valores nas novas regras.
     - --bp-xs:  < 576px   (mobile)
     - --bp-sm:  >= 576px  (mobile-large)
     - --bp-md:  >= 768px  (tablet)
     - --bp-lg:  >= 992px  (desktop)
     - --bp-xl:  >= 1200px (desktop-large) */
  --bp-xs-max: 575.98px;
  --bp-sm: 576px;
  --bp-sm-max: 767.98px;
  --bp-md: 768px;
  --bp-md-max: 991.98px;
  --bp-lg: 992px;
  --bp-lg-max: 1199.98px;
  --bp-xl: 1200px;

  /* ─── 5) Z-INDEX (escala explícita) ────────────────────────── */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
  --z-whatsapp-fab: 800;
  --z-max: 9999;

  /* ─── 6) RADIUS / SHADOWS / TRANSIÇÕES / DURATIONS ─────────── */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;
  --radius-circle: 50%;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-focus: 0 0 0 3px rgba(204, 22, 22, 0.25);

  --duration-instant: 0ms;
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-slower: 480ms;

  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  --transition-base: var(--duration-base) var(--ease-standard);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);

  /* ─── 7) COMPONENTES (tokens semânticos reutilizáveis) ─────── */
  --btn-min-height: 52px;
  --btn-padding-y: 14px;
  --btn-padding-x: 20px;
  --btn-radius: var(--radius-md);
  --btn-font-weight: var(--fw-semibold);
  --btn-line-height: var(--lh-snug);

  --card-bg: var(--color-bg);
  --card-border: var(--color-border);
  --card-radius: var(--radius-lg);
  --card-shadow: var(--shadow-md);
  --card-padding: var(--space-6);

  --container-max-content: 720px;   /* coluna de leitura (blog) */
  --container-max-narrow: 960px;
  --container-max-base: 1140px;
  --container-max-wide: 1320px;

  --header-height: 64px;
  --header-height-mobile: 56px;
}

/* ─── Modo dark (reservado — não ativo hoje) ──────────────────
 * Mantido como hook para futura implementação.
 * Adoção exige auditoria de tema RD e contraste WCAG.
 *
 * @media (prefers-color-scheme: dark) { :root { ... } }
 * ─────────────────────────────────────────────────────────── */

/* ─── Acessibilidade: respeita prefers-reduced-motion ────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --transition-base: 0ms linear;
    --transition-fast: 0ms linear;
    --transition-slow: 0ms linear;
  }
}