/* =============================================================================
   Criative — Design System  ⇄  WordPress + Elementor Pro  ·  ponte theme-aware
   -----------------------------------------------------------------------------
   Requer: tokens.css carregado ANTES deste arquivo (mesma pasta / child theme).

   COMO FUNCIONA
   Os widgets NATIVOS do Elementor pintam usando as Cores Globais, que o Elementor
   expõe como variáveis CSS: --e-global-color-primary / -secondary / -text / -accent.
   Aqui essas variáveis passam a APONTAR para os nossos tokens (var(--primary)...),
   que já trocam sozinhos conforme [data-theme] (tokens.css). Resultado: todo widget
   que usa "Cor Global → Primary/Secondary/Text/Accent" fica Dark/Light automático,
   sem duplicar estilo por tema.

   INSTALAÇÃO (child theme)
   1. Copie tokens.css e este arquivo para o child theme.
   2. No <html> defina data-theme="dark" (ou "light"). Ver toggle no README/mensagem.
   3. functions.php: use o snippet pronto em wordpress-functions-snippet.php
      (enfileira tokens.css → ponte, + theme-toggle.js, + script anti-flash no <head>).

   Nota de especificidade: os blocos de remap usam "body[class*='elementor-kit-']"
   (0,1,1) de propósito — vence a definição do Elementor em ".elementor-kit-{id}"
   (0,1,0) independentemente da ordem de carregamento do CSS.
   ============================================================================= */

/* Elementor aplica os globais no seletor .elementor-kit-{ID} (classe no <body>).
   [class*="elementor-kit-"] pega qualquer kit sem precisar do ID. */
body[class*="elementor-kit-"] {
  /* Globais de SISTEMA do Elementor → tokens Criative (seguem o tema).
     Obs.: no painel você tem Secundário=#1D161E e Realce=#21C55E, mas o Section
     Express usa 'secondary' como TEXTO suave e 'accent' como realce — por isso
     aqui secondary aponta para muted-foreground e accent para --ok (verde). */
  --e-global-color-primary:   var(--primary);
  --e-global-color-secondary: var(--muted-foreground);
  --e-global-color-text:      var(--foreground);
  --e-global-color-accent:    var(--ok);

  /* Tipografia global do Elementor → famílias Criative */
  --e-global-typography-primary-font-family:   "Space Grotesk";
  --e-global-typography-primary-font-weight:   "500";
  --e-global-typography-secondary-font-family: "Space Grotesk";
  --e-global-typography-text-font-family:      "DM Sans";
  --e-global-typography-accent-font-family:    "Geist Mono";
}

/* -----------------------------------------------------------------------------
   Suas Cores Globais (kit "Criativecom") → tokens theme-aware.
   Ids extraídos do Kit exportado (site-settings.json). Com isto, as globais que
   você usa no Header/Footer e nas suas seções passam a INVERTER no toggle
   dark/light — sem editar cor por cor no painel do Elementor.
   (title do painel → id → token)
   ----------------------------------------------------------------------------- */
body[class*="elementor-kit-"] {
  --e-global-color-66ff10e: var(--background);        /* --background        */
  --e-global-color-eff0dc1: var(--surface);           /* --surface           */
  --e-global-color-dd1734a: var(--card);              /* --card              */
  --e-global-color-2365b2d: var(--foreground);        /* --foreground        */
  --e-global-color-39177b3: var(--muted-foreground);  /* --muted-foreground  */
  --e-global-color-f9685b0: var(--primary);           /* --primary           */
  --e-global-color-62e5bf9: var(--primary-foreground);/* --primary-foreground*/
  --e-global-color-20ebfb2: var(--secondary);         /* --secondary         */
  --e-global-color-349dbfd: var(--muted);             /* --muted             */
  --e-global-color-a74e86d: var(--accent);            /* --accent            */
  --e-global-color-d60b19a: var(--border);            /* --border            */
  --e-global-color-983c5c2: var(--input-border);      /* --input-border      */
  --e-global-color-1bbec8c: var(--ring);              /* --ring              */
  --e-global-color-92c1f64: var(--chart-1);           /* --chart-1           */
  --e-global-color-5bcdba6: var(--chart-2);           /* --chart-2           */
  --e-global-color-73f3142: var(--chart-3);           /* --chart-3           */
  --e-global-color-3da6930: var(--chart-4);           /* --chart-4           */
  --e-global-color-e6476eb: var(--chart-5);           /* --chart-5           */
}

/* Fundo da página e texto base seguindo o tema ativo */
body {
  background: var(--surface);
  color: var(--foreground);
}

/* -----------------------------------------------------------------------------
   Section Express (get.section.express) — RE-SKIN dos blocos .JSON
   -----------------------------------------------------------------------------
   Descoberta: os blocos NÃO são hardcoded; usam Cores/Tipografia Globais, mas
   com os ids do kit DELES. Aqui esses ids viram apelidos dos nossos tokens, então
   qualquer bloco importado adota a paleta Criative e fica theme-aware — sem editar
   bloco a bloco e sem CSS por elemento. Ids extraídos de blocos de referência
   (k1777 / k1825); a lib usa um conjunto pequeno e consistente de globais.

   Se aparecer uma cor fora do lugar em algum bloco, é um id novo: pegue-o no .json
   (globals/colors?id=XXXX) e adicione a linha correspondente aqui.
   ----------------------------------------------------------------------------- */
body[class*="elementor-kit-"] {
  --e-global-color-a1222be: var(--surface);      /* fundo escuro das seções        */
  --e-global-color-d88298d: var(--foreground);   /* neutro claro (texto/superfícies)*/
  --e-global-color-982dfd5: var(--foreground);   /* chip/pílula clara               */
  --e-global-color-5e2a70f: var(--primary);      /* acento (laranja) → vermelho     */
  --e-global-color-8a210d9: var(--background);    /* ink escuro (hover / ícone)      */
  --e-global-color-19f77ba: var(--background);    /* texto sobre botão claro         */

  /* Tipografia custom do SE → nossas famílias (tamanhos herdam do kit) */
  --e-global-typography-ec85dfc-font-family: var(--font-sans);    /* corpo    */
  --e-global-typography-f42e19d-font-family: var(--font-display); /* títulos  */
}

/* Alguns blocos SE fixam a fonte "Radio Canada Big" em títulos LOCAIS (não-global).
   Traz esses títulos para a fonte display do DS. !important vence o CSS por-elemento
   que o Elementor injeta. Se preferir escopar só aos blocos SE, envolva-os num
   container com a classe .se-block e troque o seletor por ".se-block .elementor-heading-title". */
[class*="elementor-kit-"] .elementor-heading-title {
  font-family: var(--font-display) !important;
}

/* -----------------------------------------------------------------------------
   Classes utilitárias para colar em widgets (Avançado → CSS Classes no Elementor).
   Úteis para reproduzir superfícies do design system em seções/colunas/containers.
   ----------------------------------------------------------------------------- */
.ds-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--ring);
  padding: var(--space-4);
}
.ds-surface   { background: var(--surface); }
.ds-muted-bg  { background: var(--muted); }
.ds-border    { border: 1px solid var(--border); border-radius: var(--radius); }
.ds-muted     { color: var(--muted-foreground); }
.ds-primary   { color: var(--primary); }

/* Botão primário do DS (para HTML widget ou botão custom) */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  height: 34px; padding: 0 14px; border: 1px solid transparent; cursor: pointer;
  border-radius: var(--radius); font-family: var(--font-sans); font-weight: 500; font-size: 13px;
  background: var(--primary); color: var(--primary-foreground);
}
.ds-btn.secondary { background: var(--secondary); color: var(--secondary-foreground); }
.ds-btn.outline   { background: transparent; color: var(--foreground); border-color: var(--border); }