/* ================================================================
   FOCOFY MODE — Dark Design System v1.0
   Ativado por: body.focofy-mode

   Arquivo seguro — não toca no light mode.
   Override de Camada 2 e 3 do token system.
   Sections individuais complementam com blocos
   .focofy-mode .focofy-{section}__*.
================================================================ */

/* ── Paleta interna (só para referência neste arquivo) ── */
body.focofy-mode {
  --fm-cyan:          #22D3EE;
  --fm-indigo:        #6366F1;
  --fm-purple:        #A855F7;
  --fm-bg-0:          #05060A;
  --fm-bg-1:          #0A0C13;
  --fm-bg-2:          #10131C;
  --fm-fg:            #F5F7FA;
  --fm-fg-muted:      #9AA3B2;
  --fm-fg-dim:        #6B7588;
  --fm-border:        rgba(255, 255, 255, 0.08);
  --fm-border-strong: rgba(255, 255, 255, 0.14);
  --fm-grad-primary:  linear-gradient(135deg, #22D3EE 0%, #6366F1 45%, #A855F7 100%);

  /* ── Camada 2: Superfícies ── */
  --color-bg:           var(--fm-bg-0);
  --color-surface-1:    var(--fm-bg-1);
  --color-surface-2:    var(--fm-bg-2);
  --color-surface-3:    rgba(20, 24, 36, 0.6);
  --color-surface-dark: #030407;

  /* ── Camada 2: Texto ── */
  --color-heading:      var(--fm-fg);
  --color-text:         var(--fm-fg);
  --color-text-muted:   var(--fm-fg-muted);
  --color-text-inverse: var(--fm-fg);

  /* ── Camada 2: Links ── */
  --color-link:       var(--fm-cyan);
  --color-link-hover: #67E8F9;

  /* ── Camada 2: Bordas ── */
  --color-border-subtle: var(--fm-border);
  --color-border-strong: var(--fm-border-strong);

  /* ── Camada 2: Marca ── */
  --color-accent:       var(--fm-indigo);
  --color-accent-hover: #4F46E5;
  --color-accent-2:     var(--fm-purple);

  /* ── Camada 2: Gradientes ── */
  --gradient-hero:           linear-gradient(135deg, #22D3EE 0%, #6366F1 45%, #A855F7 100%);
  --gradient-section-accent: linear-gradient(135deg, rgba(34,211,238,0.15) 0%, rgba(99,102,241,0.2) 50%, rgba(168,85,247,0.15) 100%);
  --gradient-dark:           linear-gradient(180deg, #0F1220 0%, #0A0C13 100%);

  /* ── Camada 2: Tipografia ── */
  --font-heading: "Space Grotesk", "Inter", -apple-system, sans-serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ── Camada 2: Sombras ── */
  --shadow-sm: 0 2px 8px   rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 32px  rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* ── Camada 2: Border Radius ── */
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  22px;
  --radius-2xl: 28px;

  /* ── Camada 3: Botão Primary ── */
  --btn-primary-bg:           var(--fm-indigo);
  --btn-primary-text:         #fff;
  --btn-primary-border:       rgba(99, 102, 241, 0.4);
  --btn-primary-hover-bg:     #4F46E5;
  --btn-primary-hover-text:   #fff;
  --btn-primary-hover-border: rgba(99, 102, 241, 0.6);

  /* ── Camada 3: Botão Secondary ── */
  --btn-secondary-bg:           rgba(255, 255, 255, 0.04);
  --btn-secondary-text:         var(--fm-fg);
  --btn-secondary-border:       var(--fm-border);
  --btn-secondary-hover-bg:     rgba(255, 255, 255, 0.08);
  --btn-secondary-hover-text:   var(--fm-fg);
  --btn-secondary-hover-border: var(--fm-border-strong);

  /* ── Camada 3: Botão Ghost ── */
  --btn-ghost-text:       var(--fm-fg-muted);
  --btn-ghost-hover-text: var(--fm-fg);

  /* ── Camada 3: Cards ── */
  --card-bg:           rgba(255, 255, 255, 0.03);
  --card-border:       var(--fm-border);
  --card-radius:       var(--radius-xl);
  --card-shadow:       var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --card-padding:      var(--space-8);
  --card-transition:   border-color 250ms ease, transform 250ms ease, background 250ms ease;

  /* ── Camada 3: Inputs ── */
  --input-bg:           rgba(0, 0, 0, 0.3);
  --input-text:         var(--fm-fg);
  --input-placeholder:  var(--fm-fg-dim);
  --input-border:       var(--fm-border);
  --input-border-focus: rgba(99, 102, 241, 0.6);
  --input-border-error: #EF4444;
  --input-shadow-focus: 0 0 0 4px rgba(99, 102, 241, 0.12);

  /* ── Camada 3: Dividers ── */
  --divider-color:        var(--fm-border);
  --divider-color-strong: var(--fm-border-strong);
}

/* ── Fundo global ── */
body.focofy-mode {
  background-color: var(--fm-bg-0);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99, 102, 241, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 30%, rgba(168, 85, 247, 0.12), transparent 55%),
    radial-gradient(ellipse 50% 35% at 0%  60%, rgba(34,  211, 238, 0.08), transparent 55%);
  background-attachment: fixed;
  color: var(--fm-fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Seleção de texto ── */
.focofy-mode ::selection {
  background: rgba(99, 102, 241, 0.35);
}

/* ── Links globais ── */
.focofy-mode a:not([class]) {
  color: var(--fm-cyan);
}
.focofy-mode a:not([class]):hover {
  color: #67E8F9;
}

/* ── Botão primary — gradient real ── */
.focofy-mode .focofy-btn--primary,
.focofy-mode [class*="btn-primary"],
.focofy-mode [class*="btn"][class*="primary"] {
  background: var(--fm-grad-primary);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.15) inset,
    0 0 0 1px rgba(99, 102, 241, 0.4),
    0 8px 32px -4px rgba(99, 102, 241, 0.5);
}
.focofy-mode .focofy-btn--primary:hover,
.focofy-mode [class*="btn-primary"]:hover,
.focofy-mode [class*="btn"][class*="primary"]:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 0 0 1px rgba(99, 102, 241, 0.6),
    0 12px 40px -4px rgba(99, 102, 241, 0.6);
}

/* ── Gradient text helper ── */
.focofy-mode .focofy-gradient-text {
  background: var(--fm-grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Scrollbar discreta ── */
@media (min-width: 768px) {
  .focofy-mode ::-webkit-scrollbar       { width: 6px; height: 6px; }
  .focofy-mode ::-webkit-scrollbar-track { background: var(--fm-bg-1); }
  .focofy-mode ::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: var(--radius-full);
  }
  .focofy-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
  }
}

/* ================================================================
   OVERRIDES DIRETOS — bypass do token cascade via --ds-*
   Garante legibilidade independente dos valores ACF de Design Tokens
================================================================ */

/* ── Sections: fundo e cor ── */
body.focofy-mode .focofy-section,
body.focofy-mode .focofy-section[data-bg],
body.focofy-mode .focofy-section[data-bg="light"],
body.focofy-mode .focofy-section[data-bg="subtle"],
body.focofy-mode .focofy-section[data-bg="none"],
body.focofy-mode .focofy-section[data-bg="white"] {
  background-color: var(--fm-bg-1);
  color: var(--fm-fg);
}

body.focofy-mode .focofy-section[data-bg="dark"],
body.focofy-mode .focofy-section[data-bg="primary"],
body.focofy-mode .focofy-section[data-bg="gradient"] {
  background-color: var(--fm-bg-0);
  color: var(--fm-fg);
}

/* ── Headings ── */
body.focofy-mode h1,
body.focofy-mode h2,
body.focofy-mode h3,
body.focofy-mode h4,
body.focofy-mode h5,
body.focofy-mode h6,
body.focofy-mode .focofy-heading,
body.focofy-mode .focofy-title,
body.focofy-mode .section__title {
  color: var(--fm-fg);
}

/* ── Parágrafos e listas ── */
body.focofy-mode p,
body.focofy-mode li,
body.focofy-mode .focofy-body-text,
body.focofy-mode .section__description {
  color: var(--fm-fg-muted);
}

/* ── Kicker / eyebrow ── */
body.focofy-mode .focofy-section__kicker {
  color: var(--fm-cyan);
}

/* ── Cards ── */
body.focofy-mode [class*="focofy-"][class*="__card"],
body.focofy-mode .focofy-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-color: var(--fm-border);
  color: var(--fm-fg);
}

/* ── Header ── */
body.focofy-mode .site-header {
  background: rgba(5, 6, 10, 0.75);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--fm-border);
  color: var(--fm-fg);
}

body.focofy-mode .site-header a,
body.focofy-mode .site-header .primary-menu a {
  color: var(--fm-fg-muted);
}

body.focofy-mode .site-header a:hover,
body.focofy-mode .site-header .primary-menu a:hover {
  color: var(--fm-fg);
}

/* ── Footer ── */
body.focofy-mode .site-footer {
  background-color: var(--fm-bg-0);
  border-top: 1px solid var(--fm-border);
  color: var(--fm-fg-muted);
}


/* ================================================================
   SECTION-SPECIFIC TITLE OVERRIDES
   Classes com `color` próprio que precisam de especificidade
   maior do que .focofy-hero__title (0,0,1,0).
   body.focofy-mode .focofy-hero__title = (0,1,1,1) — ganha sempre.
================================================================ */

/* Hero */
body.focofy-mode .focofy-hero__title {
  color: var(--fm-fg);
}

/* Case Sucesso — section title + cards */
body.focofy-mode .focofy-case-sucesso__titulo,
body.focofy-mode .focofy-case-card__title,
body.focofy-mode .focofy-case-card__title a,
body.focofy-mode .focofy-case-single__title,
body.focofy-mode .focofy-case-single__section-title {
  color: var(--fm-fg);
}

/* FAQ */
body.focofy-mode .focofy-faq__title {
  color: var(--fm-fg);
}

/* Blog Feed — section title + post cards */
body.focofy-mode .focofy-blogfeed__title,
body.focofy-mode .focofy-postcard__title,
body.focofy-mode .focofy-postcard__title a {
  color: var(--fm-fg);
}

/* Services */
body.focofy-mode .services-block .section__title,
body.focofy-mode .services-block {
  --services-title-color: var(--fm-fg);
  --services-text-color:  var(--fm-fg-muted);
  --services-card-bg:           rgba(10, 12, 19, 0.8);
  --services-card-bg-hover:     rgba(16, 19, 28, 0.9);
  --services-card-border:       rgba(255, 255, 255, 0.08);
  --services-card-border-hover: rgba(99, 102, 241, 0.35);
  --services-icon-bg:           rgba(99, 102, 241, 0.12);
  --services-icon-color:        var(--fm-cyan);
  --services-benefit-bg:        rgba(255, 255, 255, 0.04);
  --services-benefit-border:    rgba(255, 255, 255, 0.08);
  --services-benefit-color:     var(--fm-fg-muted);
  --services-badge-color:       var(--fm-fg);
}

/* Howto */
body.focofy-mode .focofy-howto__titulo,
body.focofy-mode .focofy-howto-card__title,
body.focofy-mode .focofy-howto-single__title,
body.focofy-mode .focofy-howto-single__sub-title,
body.focofy-mode .focofy-howto-single__step-name {
  color: var(--fm-fg);
}

/* Topics */
body.focofy-mode .focofy-topic__title,
body.focofy-mode .focofy-topic-card__title,
body.focofy-mode .focofy-topic__related-title,
body.focofy-mode .focofy-archive__title {
  color: var(--fm-fg);
}

/* Team */
body.focofy-mode .team-card__name {
  color: var(--fm-fg);
}

/* Links dentro de títulos — garantir que não puxem a cor azul/preta padrão */
body.focofy-mode .focofy-postcard__title a:hover,
body.focofy-mode .focofy-case-card__title a:hover {
  color: var(--fm-cyan);
}


/* ================================================================
   FIX TEXT — divs + all data-bg variants
   section-variants.css usa especificidade (0,2,1) para dark sections
   → precisamos de (0,3,1) para ganhar
================================================================ */

/* Todos os data-bg variants no focofy-mode → fundo escuro, texto claro */
body.focofy-mode .focofy-section[data-bg="dark"],
body.focofy-mode .focofy-section[data-bg="accent"],
body.focofy-mode .focofy-section[data-bg="gradient"],
body.focofy-mode .focofy-section[data-bg="primary"] {
  background-color: var(--fm-bg-1);
  color: var(--fm-fg);
}

/* Headings dentro das variantes — supera section-variants.css (0,2,1) com (0,3,2) */
body.focofy-mode .focofy-section[data-bg="dark"] h1,
body.focofy-mode .focofy-section[data-bg="dark"] h2,
body.focofy-mode .focofy-section[data-bg="dark"] h3,
body.focofy-mode .focofy-section[data-bg="dark"] h4,
body.focofy-mode .focofy-section[data-bg="primary"] h1,
body.focofy-mode .focofy-section[data-bg="primary"] h2,
body.focofy-mode .focofy-section[data-bg="primary"] h3,
body.focofy-mode .focofy-section[data-bg="accent"] h1,
body.focofy-mode .focofy-section[data-bg="accent"] h2,
body.focofy-mode .focofy-section[data-bg="gradient"] h1,
body.focofy-mode .focofy-section[data-bg="gradient"] h2 {
  color: var(--fm-fg);
}

/* Paragraphs e listas em seções dark/accent/gradient/primary */
body.focofy-mode .focofy-section[data-bg="dark"] p,
body.focofy-mode .focofy-section[data-bg="dark"] li,
body.focofy-mode .focofy-section[data-bg="primary"] p,
body.focofy-mode .focofy-section[data-bg="primary"] li,
body.focofy-mode .focofy-section[data-bg="accent"] p,
body.focofy-mode .focofy-section[data-bg="accent"] li,
body.focofy-mode .focofy-section[data-bg="gradient"] p,
body.focofy-mode .focofy-section[data-bg="gradient"] li {
  color: var(--fm-fg-muted);
}

/* Divs de texto que não são pegos por `body.focofy-mode p` */
body.focofy-mode .focofy-hero__desc,
body.focofy-mode .focofy-hero__subtitle {
  color: var(--fm-fg-muted);
}

/* Case sucesso — textos de subtítulo e corpo */
body.focofy-mode .focofy-case-sucesso__subtitulo,
body.focofy-mode .focofy-case-card__result,
body.focofy-mode .focofy-case-card__client,
body.focofy-mode .focofy-case-single__intro,
body.focofy-mode .focofy-case-single__section-body,
body.focofy-mode .focofy-case__section-body {
  color: var(--fm-fg-muted);
}

/* FAQ — texto da pergunta e resposta */
body.focofy-mode .focofy-faq__question-text,
body.focofy-mode .focofy-faq__answer {
  color: var(--fm-fg-muted);
}

/* Blog feed — subtítulo e meta */
body.focofy-mode .focofy-blogfeed__subtitle,
body.focofy-mode .focofy-postcard__excerpt,
body.focofy-mode .focofy-postcard__meta {
  color: var(--fm-fg-muted);
}

/* Howto */
body.focofy-mode .focofy-howto__subtitulo,
body.focofy-mode .focofy-howto-card__excerpt,
body.focofy-mode .focofy-howto-single__intro,
body.focofy-mode .focofy-howto-single__step-text {
  color: var(--fm-fg-muted);
}

/* Links em seções dark — herdam e mostram como cyan */
body.focofy-mode .focofy-section[data-bg="dark"] a,
body.focofy-mode .focofy-section[data-bg="primary"] a {
  color: var(--fm-cyan);
}