/* KMJ Labs + EvolCoach — protótipo website institucional
   Tokens KDL: documentacao/00-KMJ-Foundation/03-KMJ-Design-Tokens.md
   Overlay produto: 12-KMJ-Product-Identity.md (linha FitCycle → EvolCoach)
   Baseline: Fontes/kmj-website/styles.css (evoluído, não reinventado) */

:root {
  /* —— Core —— */
  --kmj-neutral-0: #ffffff;
  --kmj-neutral-50: #f7f8fa;
  --kmj-neutral-100: #eef0f3;
  --kmj-neutral-200: #dfe3e8;
  --kmj-neutral-300: #c7ccd4;
  --kmj-neutral-600: #4b5160;
  --kmj-neutral-700: #343a46;
  --kmj-neutral-800: #1f232b;
  --kmj-neutral-900: #121418;

  --kmj-indigo-50: #eef0ff;
  --kmj-indigo-300: #a5a9f5;
  --kmj-indigo-500: #6366e8;
  --kmj-indigo-600: #4f46e5;
  --kmj-indigo-700: #4038b8;

  --kmj-cyan-500: #06b6d4;

  /* success / EvolCoach (FitCycle overlay na KDL) */
  --kmj-green-600: #16a34a;
  --kmj-green-500: #22c55e;
  --kmj-lime-500: #84cc16;

  /* —— Semantic (tema claro — institucional indigo) —— */
  --color-surface-base: var(--kmj-neutral-0);
  --color-surface-sunken: var(--kmj-neutral-50);
  --color-border-default: var(--kmj-neutral-200);
  --color-text-primary: var(--kmj-neutral-700);
  --color-text-secondary: var(--kmj-neutral-600);
  --color-text-inverse: var(--kmj-neutral-0);
  --color-action-primary: var(--kmj-indigo-600);
  --color-action-primary-hover: var(--kmj-indigo-700);
  --color-link: var(--kmj-indigo-600);
  --color-link-visited: var(--kmj-neutral-700);
  --color-accent-soft: var(--kmj-indigo-50);
  --color-border-focus: var(--kmj-indigo-600);

  /* —— Type —— */
  --font-base: Inter, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Code", monospace;
  --font-size-display: 2.25rem;
  --font-size-headline: 1.75rem;
  --font-size-title-md: 1.125rem;
  --font-size-body-lg: 1rem;
  --font-size-body-md: 0.875rem;
  --font-size-label: 0.8125rem;
  --font-size-overline: 0.6875rem;

  /* —— Space / radius / elevation —— */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;
  --elevation-1: 0 1px 2px rgba(18, 20, 24, 0.08);

  --touch-min: 44px;
  --touch-comfortable: 48px;
  --container-max: 960px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-surface-base: var(--kmj-neutral-800);
    --color-surface-sunken: var(--kmj-neutral-900);
    --color-border-default: var(--kmj-neutral-600);
    --color-text-primary: var(--kmj-neutral-50);
    --color-text-secondary: var(--kmj-neutral-300);
    /* KDL: action.primary dark = indigo.500 */
    --color-action-primary: var(--kmj-indigo-500);
    --color-action-primary-hover: var(--kmj-indigo-600);
    --color-link: var(--kmj-indigo-300);
    --color-link-visited: var(--kmj-neutral-300);
    --color-accent-soft: #272b38;
    --color-border-focus: var(--kmj-indigo-300);
  }
}

/* —— Overlay EvolCoach (página produto) ——
   Verde #16A34A × branco ≈ 3,30:1 — insuficiente para texto/botão filled.
   Ação = outline + texto neutro; links = neutro (não verde como cor de texto).
   Verde permanece em borda, foco, logo e acentos decorativos. */
.theme-evolcoach {
  --color-action-primary: var(--kmj-green-600);
  /* hover: escurecimento a partir do primary (UX) — sem hex core novo */
  --color-action-primary-hover: color-mix(in srgb, var(--kmj-green-600) 82%, #000);
  --color-link: var(--kmj-neutral-700);
  --color-accent-soft: var(--kmj-neutral-50);
  --color-border-focus: var(--kmj-green-600);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-evolcoach,
  .theme-evolcoach:not([data-theme="light"]) {
    --color-action-primary: var(--kmj-green-500);
    --color-action-primary-hover: var(--kmj-green-600);
    --color-link: var(--kmj-neutral-50);
    --color-accent-soft: #272b38; /* mesmo soft dark institucional; sem green.50 oficial */
    --color-border-focus: var(--kmj-green-500);
  }
}

/* Quando html tem theme-evolcoach */
html.theme-evolcoach {
  --color-action-primary: var(--kmj-green-600);
  --color-action-primary-hover: color-mix(in srgb, var(--kmj-green-600) 82%, #000);
  --color-link: var(--kmj-neutral-700);
  --color-accent-soft: var(--kmj-neutral-50);
  --color-border-focus: var(--kmj-green-600);
}

@media (prefers-color-scheme: dark) {
  html.theme-evolcoach:not([data-theme="light"]) {
    --color-surface-base: var(--kmj-neutral-800);
    --color-surface-sunken: var(--kmj-neutral-900);
    --color-border-default: var(--kmj-neutral-600);
    --color-text-primary: var(--kmj-neutral-50);
    --color-text-secondary: var(--kmj-neutral-300);
    --color-action-primary: var(--kmj-green-500);
    --color-action-primary-hover: var(--kmj-green-600);
    --color-link: var(--kmj-neutral-50);
    --color-link-visited: var(--kmj-neutral-300);
    --color-accent-soft: #272b38;
    --color-border-focus: var(--kmj-green-500);
  }
}

/* —— Reset / base —— */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light dark;
}
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--font-size-body-lg);
  line-height: 1.5;
  background: var(--color-surface-base);
  color: var(--color-text-primary);
}
h1, h2, h3, p, ul { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
a {
  color: var(--color-link);
  text-underline-offset: 3px;
}
a:hover { color: var(--color-action-primary-hover); }
a:visited { color: var(--color-link-visited); }
a:visited:hover { color: var(--color-action-primary-hover); }
:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* —— Skip link —— */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
  font-size: var(--font-size-label);
  text-decoration: none;
}
.skip-link:focus {
  top: var(--space-md);
  color: var(--color-text-inverse);
}
/* Skip no EvolCoach: outline (contraste branco×verde insuficiente) */
html.theme-evolcoach .skip-link {
  background: var(--color-surface-base);
  color: var(--color-text-primary);
  border: 2px solid var(--color-action-primary);
}
html.theme-evolcoach .skip-link:focus {
  color: var(--color-text-primary);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

/* —— Header —— */
.site-header {
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-surface-base);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
  min-height: 64px;
  padding-block: var(--space-xs);
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  text-decoration: none;
  color: var(--color-text-primary);
}
.brand:hover,
.brand:visited {
  color: var(--color-text-primary);
  opacity: 0.92;
}
.brand-logo {
  height: 28px;
  width: auto;
}
.brand-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo-light { display: none; }
  :root:not([data-theme="light"]) .brand-logo-dark { display: block; }
}
.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}
.nav-link {
  font-size: var(--font-size-body-md);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding-inline: var(--space-xs);
  text-decoration: none;
}
.nav-link:hover { text-decoration: underline; }

/* —— Hero —— */
.hero {
  padding-block: var(--space-3xl);
  background: linear-gradient(180deg, var(--color-accent-soft), var(--color-surface-base) 88%);
}
.eyebrow {
  font-size: var(--font-size-overline);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--color-link);
  margin-bottom: var(--space-md);
}
h1 {
  font-size: 2rem; /* mobile: display reduzido (UX) */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 18ch;
  color: var(--color-text-primary);
}
.lead {
  margin-top: var(--space-lg);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 60ch;
}
.support {
  margin-top: var(--space-md);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-secondary);
  max-width: 60ch;
}
.hero-actions {
  margin-top: var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.microcopy {
  margin-top: var(--space-md);
  font-size: var(--font-size-body-md);
  color: var(--color-text-secondary);
  max-width: 48ch;
}

/* Hero EvolCoach: 2 colunas em md+ */
.hero-evolcoach .hero-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}
.hero-symbol {
  justify-self: center;
  width: min(200px, 55vw);
  height: auto;
  opacity: 0.95;
}
.hero-symbol-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-symbol-light { display: none; }
  :root:not([data-theme="light"]) .hero-symbol-dark { display: block; }
}

/* —— Buttons —— */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-comfortable);
  min-width: var(--touch-min);
  padding: 0 var(--space-lg);
  background: var(--color-action-primary);
  color: var(--color-text-inverse);
  font-weight: 600;
  font-size: var(--font-size-label);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
  width: 100%;
}
.button:hover {
  background: var(--color-action-primary-hover);
  color: var(--color-text-inverse);
}
.button:visited { color: var(--color-text-inverse); }
.button:visited:hover { color: var(--color-text-inverse); }
.button:active {
  filter: brightness(0.92);
}

/*
  Contraste #16A34A × branco ≈ 3,3:1 — falha WCAG AA texto (4,5:1).
  Botões EvolCoach usam outline + texto neutro (default Supervisor / UX §4.4).
*/
html.theme-evolcoach .button,
.button--outline {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-action-primary);
}
html.theme-evolcoach .button:hover,
.button--outline:hover {
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  border-color: var(--color-action-primary-hover);
}
html.theme-evolcoach .button:visited,
.button--outline:visited {
  color: var(--color-text-primary);
}

.link-tertiary {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-weight: 600;
  font-size: var(--font-size-label);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* —— Sections —— */
section { padding-block: var(--space-3xl); }
h2 {
  font-size: var(--font-size-headline);
  line-height: 1.25;
  font-weight: 700;
  margin-bottom: var(--space-lg);
  color: var(--color-text-primary);
}
h3 {
  font-size: var(--font-size-title-md);
  line-height: 1.35;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-text-primary);
}
.section-intro {
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-lg);
  margin-bottom: var(--space-xl);
}
.prose {
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-lg);
}
.prose + .prose { margin-top: var(--space-md); }

/* Cards — paths / pillars */
.card-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-md);
  margin: 0;
}
.card {
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--elevation-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.card p {
  font-size: var(--font-size-body-md);
  color: var(--color-text-secondary);
  flex: 1;
}
.card-link {
  font-weight: 600;
  font-size: var(--font-size-label);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  margin-top: var(--space-xs);
  align-self: flex-start;
}

/* Teaser EvolCoach (home) */
.teaser {
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border-default);
}
.teaser-inner {
  display: grid;
  gap: var(--space-lg);
  align-items: start;
}
.teaser-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}
.teaser-logo {
  height: 40px;
  width: auto;
}
.teaser-logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .teaser-logo-light { display: none; }
  :root:not([data-theme="light"]) .teaser-logo-dark { display: block; }
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  font-size: var(--font-size-label);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--color-accent-soft);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-default);
  margin-bottom: var(--space-md);
}
/* Pill com cor de link só na home indigo (contraste OK com indigo) */
html:not(.theme-evolcoach) .pill {
  color: var(--color-link);
}

/* Concept list */
.concept-list {
  margin: 0 0 var(--space-xl);
  padding-left: var(--space-lg);
  max-width: 62ch;
  color: var(--color-text-secondary);
}
.concept-list li {
  margin-bottom: var(--space-md);
}
.concept-list strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.honesty-note {
  max-width: 62ch;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-md);
}

/* FAQ accordion (native details) */
.faq-list {
  display: grid;
  gap: var(--space-sm);
  max-width: 720px;
}
.faq-list details {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-surface-base);
  padding: 0;
}
.faq-list summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-size-body-lg);
  padding: var(--space-md) var(--space-lg);
  min-height: var(--touch-comfortable);
  display: flex;
  align-items: center;
  list-style: none;
  color: var(--color-text-primary);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 150ms ease;
}
.faq-list details[open] summary::after {
  transform: rotate(-135deg);
}
.faq-list summary:hover {
  background: var(--color-surface-sunken);
  border-radius: var(--radius-md);
}
.faq-list details[open] summary {
  border-bottom: 1px solid var(--color-border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.faq-answer {
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  color: var(--color-text-secondary);
  font-size: var(--font-size-body-md);
  max-width: 65ch;
}
.faq-answer a { font-weight: 600; }

/* Contact / notify / final CTA */
.contact-actions,
.notify-actions,
.final-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.email-visible {
  font-weight: 600;
  font-size: var(--font-size-body-lg);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

.section-sunken {
  background: var(--color-surface-sunken);
  border-block: 1px solid var(--color-border-default);
}

/* —— Footer —— */
.site-footer {
  border-top: 1px solid var(--color-border-default);
  padding-block: var(--space-xl);
  font-size: var(--font-size-body-md);
  color: var(--color-text-secondary);
}
.site-footer .container {
  display: grid;
  gap: var(--space-xs);
}
.site-footer a {
  display: inline-flex;
  min-height: var(--touch-min);
  align-items: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xs);
}
.footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--color-text-secondary);
}
.footer-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.footer-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.footer-endorsement {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.by-kmj {
  height: 24px;
  width: auto;
}
.by-kmj-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .by-kmj-light { display: none; }
  :root:not([data-theme="light"]) .by-kmj-dark { display: block; }
}

/* —— Legal stub —— */
.legal { padding-block: var(--space-2xl); }
.legal h1 { font-size: 2rem; max-width: none; }
.legal h2 {
  font-size: 1.375rem;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
}
.legal p, .legal ul {
  color: var(--color-text-secondary);
  max-width: 66ch;
  margin-bottom: var(--space-md);
}
.legal ul { padding-left: var(--space-lg); }

/* —— Preview board —— */
.preview-board {
  padding: var(--space-lg);
  background: var(--kmj-neutral-100);
  min-height: 100vh;
}
.preview-board h1 {
  max-width: none;
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}
.preview-grid {
  display: grid;
  gap: var(--space-xl);
}
.preview-frame {
  border: 1px solid var(--kmj-neutral-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--kmj-neutral-0);
}
.preview-frame iframe {
  width: 100%;
  height: 80vh;
  border: 0;
  display: block;
}
.preview-label {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-label);
  font-weight: 600;
  background: var(--kmj-neutral-200);
  color: var(--kmj-neutral-800);
}

/* —— Breakpoints —— */
@media (min-width: 600px) {
  h1 { font-size: 2.25rem; max-width: 20ch; }
  .button { width: auto; }
  .card-grid--paths {
    grid-template-columns: repeat(2, 1fr);
  }
  .card-grid--pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero-evolcoach .hero-grid {
    grid-template-columns: 1fr auto;
  }
  .teaser-inner {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

@media (min-width: 840px) {
  .hero { padding-block: var(--space-4xl); }
  section { padding-block: var(--space-4xl); }
  .card-grid--pillars {
    grid-template-columns: repeat(3, 1fr);
  }
  .hero-symbol {
    width: 240px;
  }
}

@media (min-width: 1200px) {
  .preview-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}