/* ============================================================
   Glass Cannon Theme — Design Tokens
   ------------------------------------------------------------
   Tokens ESTÁTICOS + estilos de elemento.
   As cores e fontes chegam via :root inline (ver inc/design-system.php).

   ESPECIFICIDADE: propositalmente mínima (0,0,1 na maioria).
   Isso permite que os Estilos Globais do Elementor, ou qualquer
   CSS de widget, sobrescrevam o tema sem precisar de !important.
   ============================================================ */

:root {

  /* ── ESCALA TIPOGRÁFICA ─────────────────────────────────── */
  --gc-text-xs:   0.75rem;
  --gc-text-sm:   0.875rem;
  --gc-text-base: 1rem;
  --gc-text-lg:   1.125rem;
  --gc-text-xl:   1.25rem;
  --gc-text-2xl:  1.5rem;
  --gc-text-3xl:  1.875rem;
  --gc-text-4xl:  2.25rem;
  --gc-text-5xl:  3rem;
  --gc-text-6xl:  3.75rem;
  --gc-text-7xl:  4.5rem;

  /* ── PESOS ──────────────────────────────────────────────── */
  --gc-weight-regular:   400;
  --gc-weight-medium:    500;
  --gc-weight-semibold:  600;
  --gc-weight-bold:      700;
  --gc-weight-extrabold: 800;

  /* ── ALTURA DE LINHA ────────────────────────────────────── */
  --gc-leading-none:    1;
  --gc-leading-tight:   1.2;
  --gc-leading-snug:    1.375;
  --gc-leading-normal:  1.5;
  --gc-leading-relaxed: 1.625;
  --gc-leading-loose:   2;

  /* ── ESPAÇAMENTO ENTRE LETRAS ───────────────────────────── */
  --gc-tracking-tighter: -0.04em;
  --gc-tracking-tight:   -0.02em;
  --gc-tracking-normal:  0;
  --gc-tracking-wide:    0.02em;
  --gc-tracking-wider:   0.04em;

  /* ── ESPAÇAMENTO ────────────────────────────────────────── */
  --gc-space-0:   0;
  --gc-space-px:  1px;
  --gc-space-1:   0.25rem;
  --gc-space-2:   0.5rem;
  --gc-space-3:   0.75rem;
  --gc-space-4:   1rem;
  --gc-space-5:   1.25rem;
  --gc-space-6:   1.5rem;
  --gc-space-8:   2rem;
  --gc-space-10:  2.5rem;
  --gc-space-12:  3rem;
  --gc-space-16:  4rem;
  --gc-space-20:  5rem;
  --gc-space-24:  6rem;
  --gc-space-32:  8rem;

  /* ── RAIO DE BORDA ──────────────────────────────────────── */
  --gc-radius-none: 0;
  --gc-radius-sm:   0.25rem;
  --gc-radius-md:   0.5rem;
  --gc-radius-lg:   0.75rem;
  --gc-radius-xl:   1rem;
  --gc-radius-2xl:  1.5rem;
  --gc-radius-3xl:  2rem;
  --gc-radius-full: 9999px;

  /* ── SOMBRAS ────────────────────────────────────────────── */
  --gc-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.3);
  --gc-shadow-sm: 0 2px 4px -1px rgba(0,0,0,0.35), 0 1px 2px -1px rgba(0,0,0,0.25);
  --gc-shadow-md: 0 6px 12px -2px rgba(0,0,0,0.4), 0 3px 6px -3px rgba(0,0,0,0.3);
  --gc-shadow-lg: 0 12px 24px -4px rgba(0,0,0,0.45), 0 6px 12px -6px rgba(0,0,0,0.35);
  --gc-shadow-xl: 0 24px 48px -8px rgba(0,0,0,0.55), 0 12px 24px -12px rgba(0,0,0,0.4);

  /* ── MOVIMENTO ──────────────────────────────────────────── */
  --gc-duration-instant: 75ms;
  --gc-duration-fast:    150ms;
  --gc-duration-normal:  250ms;
  --gc-duration-slow:    400ms;
  --gc-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --gc-ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --gc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --gc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ────────────────────────────────────────────── */
  --gc-z-base:     0;
  --gc-z-docked:   10;
  --gc-z-dropdown: 100;
  --gc-z-sticky:   200;
  --gc-z-overlay:  300;
  --gc-z-modal:    400;
  --gc-z-popover:  500;
  --gc-z-toast:    600;
  --gc-z-tooltip:  700;

  /* ── FALLBACKS ──────────────────────────────────────────────
     Se o CSS inline não carregar (ex.: sistema desativado),
     estes valores impedem que o site fique sem estilo algum.
     São sobrescritos pelo :root dinâmico quando presente.
     ------------------------------------------------------- */
  --gc-bg-base:        #0e1c1f;
  --gc-bg-surface:     #142529;
  --gc-bg-elevated:    #213a40;
  --gc-bg-raised:      #2c4d54;
  --gc-text-primary:   #f5f9f7;
  --gc-text-secondary: #a8bcc2;
  --gc-text-tertiary:  #6a8087;
  --gc-accent:         #f5ff00;
  --gc-accent-hover:   #ffff33;
  --gc-link:           #f5ff00;
  --gc-link-hover:     #ffff33;
  --gc-link-visited:   #d4dd00;
  --gc-border-subtle:  #213a40;
  --gc-border-default: #2c4d54;
  --gc-font-display:   'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --gc-font-body:      'Manrope', ui-sans-serif, system-ui, sans-serif;
  --gc-font-mono:      'JetBrains Mono', ui-monospace, monospace;
  --gc-font-size-base: 16px;
}

/* ============================================================
   ESTILOS DE ELEMENTO
   ============================================================ */

html {
  font-size: var(--gc-font-size-base);
}

body {
  font-family: var(--gc-font-body);
  font-size: var(--gc-text-base);
  line-height: var(--gc-leading-normal);
  color: var(--gc-text-secondary);
  background-color: var(--gc-bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── TÍTULOS ────────────────────────────────────────────────
   Sem tamanhos fixos por padrão: o Elementor define o tamanho
   de cada título no design. Aqui garantimos só família, peso e
   cor — o que resolve o problema de herança sem brigar com o
   layout que você montou.
   ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--gc-font-display);
  color: var(--gc-text-primary);
  line-height: var(--gc-leading-tight);
  letter-spacing: var(--gc-tracking-tight);
}

p {
  color: var(--gc-text-secondary);
  line-height: var(--gc-leading-relaxed);
}

/* ── LINKS ──────────────────────────────────────────────────
   Este é o bloco que corrige o azul padrão do navegador.
   Especificidade 0,0,1 — o Elementor sobrescreve sem esforço.
   :not(.elementor-button) protege os botões, que têm cor própria.
   ------------------------------------------------------- */
a {
  color: var(--gc-link);
  text-decoration: none;
  transition: color var(--gc-duration-fast) var(--gc-ease-out);
}

a:hover,
a:focus {
  color: var(--gc-link-hover);
}

a:visited {
  color: var(--gc-link-visited);
}

/* Botões do Elementor mantêm a própria paleta */
a.elementor-button,
a.elementor-button:visited,
a.elementor-button:hover {
  color: inherit;
}

/* Foco visível — requisito de acessibilidade */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gc-accent);
  outline-offset: 2px;
}

/* ── TEXTO AUXILIAR ─────────────────────────────────────── */
small {
  font-size: var(--gc-text-xs);
  color: var(--gc-text-tertiary);
}

strong, b {
  color: var(--gc-text-primary);
  font-weight: var(--gc-weight-bold);
}

blockquote {
  border-left: 3px solid var(--gc-accent);
  padding-left: var(--gc-space-5);
  color: var(--gc-text-secondary);
  font-style: italic;
}

hr {
  border: 0;
  border-top: 1px solid var(--gc-border-subtle);
}

/* ── CÓDIGO ─────────────────────────────────────────────── */
code, kbd, samp, pre {
  font-family: var(--gc-font-mono);
  font-size: var(--gc-text-sm);
}

code {
  background-color: var(--gc-bg-elevated);
  color: var(--gc-accent);
  padding: 0.15em 0.4em;
  border-radius: var(--gc-radius-sm);
}

pre {
  background-color: var(--gc-bg-elevated);
  color: var(--gc-text-primary);
  padding: var(--gc-space-4);
  border-radius: var(--gc-radius-md);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ── LISTAS ─────────────────────────────────────────────── */
ul, ol {
  color: var(--gc-text-secondary);
}

li::marker {
  color: var(--gc-accent);
}

/* ── TABELAS ────────────────────────────────────────────── */
table {
  border-collapse: collapse;
  width: 100%;
  color: var(--gc-text-secondary);
}

th {
  color: var(--gc-text-primary);
  font-family: var(--gc-font-display);
  font-weight: var(--gc-weight-semibold);
  text-align: left;
  border-bottom: 2px solid var(--gc-border-default);
  padding: var(--gc-space-3);
}

td {
  border-bottom: 1px solid var(--gc-border-subtle);
  padding: var(--gc-space-3);
}

/* ── FORMULÁRIOS ────────────────────────────────────────── */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  color: var(--gc-text-primary);
}

::placeholder {
  color: var(--gc-text-tertiary);
  opacity: 1;
}

/* ── SELEÇÃO DE TEXTO ───────────────────────────────────── */
::selection {
  background-color: var(--gc-accent);
  color: var(--gc-bg-base);
}

/* ── UTILITÁRIO: OLHO / EYEBROW ─────────────────────────── */
.gc-eyebrow {
  font-family: var(--gc-font-mono);
  font-size: var(--gc-text-xs);
  font-weight: var(--gc-weight-semibold);
  color: var(--gc-accent);
  text-transform: uppercase;
  letter-spacing: var(--gc-tracking-wider);
}

/* ── MOVIMENTO REDUZIDO ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}