/* ════════════════════════════════════════════════════════════════
   MEKATRONIK · DESIGN TOKENS
   ----------------------------------------------------------------
   Variáveis CSS semânticas para uso em projetos Mekatronik (slides,
   propostas, sites, apps). Cobre LIGHT MODE (default) e DARK MODE.

   Sem cores fora desta paleta. Sem fontes além de Syne.
   Sem sombras / glow / gradientes (brand é flat).

   Fonte da verdade: brand/IDENTIDADE-VISUAL.md
   Vocabulário de componentes: brand/templates/components.md
   Atualizado: 2026-05
═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND COLORS (paleta oficial — IDENTIDADE-VISUAL §2.1) ─── */
  --mk-blue:       #026AEF;  /* PANTONE 285 C · única cor saturada usada com frequência */
  --mk-navy:       #023659;  /* PANTONE 302 C · par escuro do azul */
  --mk-black:      #000000;  /* Black 6 C */
  --mk-cool-gray:  #838382;  /* COOL GRAY 8 C */
  --mk-white:      #FFFFFF;

  /* Acentos pontuais (uso parcimonioso — uma cor acentual por peça, no máximo) */
  --mk-orange:     #EF8E5E;  /* PANTONE 1635 C · números positivos / categoria operação */
  --mk-red:        #DB311B;  /* PANTONE 485 C  · atenção / risco (raro, dessaturadamente) */
  --mk-lime:       #D8E16D;  /* PANTONE 379 C  · sustentabilidade / natureza */
  --mk-lavender:   #C1BAFD;  /* PANTONE 2635 C · categoria AI / digital */
  --mk-yellow:     #EFCB1D;  /* PANTONE 7405 C · energia / informativo */

  /* ─── SEMANTIC TOKENS · LIGHT MODE (default) ─── */
  --mk-bg:                 #FFFFFF;        /* fundo principal */
  --mk-bg-elevated:        #F9FAFB;        /* fundo de cards/superfícies elevadas */
  --mk-bg-emphasis:        #F3F4F6;        /* fundo de headers neutros (tier t1, etc) */
  --mk-text:               #1F2937;        /* texto principal */
  --mk-text-muted:         #6B7280;        /* texto secundário (descrição, body soft) */
  --mk-text-mute:          #9CA3AF;        /* texto muito muted (counter, metadata) */
  --mk-rule:               #E5E7EB;        /* borda padrão entre elementos */
  --mk-surface:            rgba(31,41,55,0.025); /* superfície translúcida sutil */
  --mk-on-accent:          #FFFFFF;        /* texto sobre acento mk-blue */

  /* ─── TYPOGRAPHY (IDENTIDADE-VISUAL §3) ─── */
  --mk-font:               'Syne', system-ui, -apple-system, sans-serif;

  /* Pesos · default em títulos é 700 (NÃO 800 — ver §3.5) */
  --mk-fw-regular:         400;
  --mk-fw-medium:          500;
  --mk-fw-semibold:        600;
  --mk-fw-bold:            700;  /* default em headings */

  /* Tracking — sempre negativo em títulos (§3.4) */
  --mk-track-hero:         -0.040em;  /* hero ≥36pt */
  --mk-track-h2:           -0.030em;  /* seção 22-44pt */
  --mk-track-h3:           -0.020em;  /* subtítulos 18-32pt */
  --mk-track-bignum:       -0.050em;  /* números grandes em destaque 60pt+ */
  --mk-track-card:         -0.020em;  /* nomes de card */
  --mk-track-eyebrow:      +0.060em;  /* eyebrow uppercase */
  --mk-track-body:         0;         /* corpo de texto */

  /* Escala tipográfica responsiva (clamp para slides 16:9 / FullHD) */
  --mk-fs-hero:            clamp(36pt, 4.8vw, 72pt);
  --mk-fs-h2:              clamp(22pt, 3.2vw, 44pt);
  --mk-fs-h3:              clamp(18pt, 2.1vw, 30pt);
  --mk-fs-bignum:          clamp(60pt, 13vw, 200pt);
  --mk-fs-body:            clamp(13pt, 1.35vw, 18pt);
  --mk-fs-small:           clamp(10pt, 1vw, 13pt);
  --mk-fs-eyebrow:         clamp(11pt, 1.05vw, 14pt);
  --mk-fs-footer:          9.5pt;

  /* Line height */
  --mk-lh-hero:            1.05;
  --mk-lh-heading:         1.15;
  --mk-lh-body:            1.55;

  /* ─── SPACING (8px base scale) ─── */
  --mk-sp-1:   4px;
  --mk-sp-2:   8px;
  --mk-sp-3:  12px;
  --mk-sp-4:  16px;
  --mk-sp-5:  24px;
  --mk-sp-6:  32px;
  --mk-sp-7:  48px;
  --mk-sp-8:  64px;
  --mk-sp-9:  96px;

  /* ─── RADIUS ─── */
  --mk-radius-sm:    4px;
  --mk-radius-md:    8px;
  --mk-radius-pill:  999px;  /* botões, chips, pills */
  /* NUNCA usar radius >8px exceto em pills — mantém feel flat geométrico */

  /* ─── BORDER WIDTHS ─── */
  --mk-border:           1px;
  --mk-border-accent:    3px;  /* topo de card destaque, header H2 underline */
  --mk-border-callout:   4px;  /* barra lateral em blockquote/callout/transition-strip */

  /* ─── Z-INDEX ─── */
  --mk-z-content:   1;
  --mk-z-chrome:    200;
  --mk-z-overlay:   1000;
}

/* ─── DARK MODE ───
   Aplicar via classe .dark-mode em <html>, ou via prefers-color-scheme.
   Brand guide indica dark como default em digital (§2.3), mas light é
   aceitável e foi usado nos materiais Appius. */

@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --mk-bg:               #030712;
    --mk-bg-elevated:      #111827;
    --mk-bg-emphasis:      #1F2937;
    --mk-text:             #FFFFFF;
    --mk-text-muted:       rgba(255,255,255,0.78);
    --mk-text-mute:        rgba(255,255,255,0.55);
    --mk-rule:             rgba(255,255,255,0.18);
    --mk-surface:          rgba(255,255,255,0.04);
  }
}

.dark-mode {
  --mk-bg:               #030712;
  --mk-bg-elevated:      #111827;
  --mk-bg-emphasis:      #1F2937;
  --mk-text:             #FFFFFF;
  --mk-text-muted:       rgba(255,255,255,0.78);
  --mk-text-mute:        rgba(255,255,255,0.55);
  --mk-rule:             rgba(255,255,255,0.18);
  --mk-surface:          rgba(255,255,255,0.04);
}