/*
 * SOMA · Fundação visual das superfícies públicas
 *
 * Escopo intencional: somente páginas com body.marketing-surface.
 * A plataforma autenticada e o CSS global permanecem inalterados.
 */

body.marketing-surface {
  /* Cor e superfícies */
  --marketing-color-background: #050b17;
  --marketing-color-background-elevated: #071222;
  --marketing-color-background-soft: #081528;
  --marketing-color-text: #f5f9fc;
  --marketing-color-text-muted: #a7b7c9;
  --marketing-color-text-soft: #c1cede;
  --marketing-color-teal: #02b8bf;
  --marketing-color-teal-light: #7fe7eb;
  --marketing-color-violet: #7b61ff;
  --marketing-surface-glass: rgba(8, 21, 40, 0.72);
  --marketing-surface-panel: rgba(10, 24, 43, 0.82);
  --marketing-surface-panel-strong: rgba(7, 18, 34, 0.94);
  --marketing-border-subtle: rgba(127, 231, 235, 0.14);
  --marketing-border-default: rgba(127, 231, 235, 0.2);
  --marketing-border-strong: rgba(127, 231, 235, 0.38);
  --marketing-focus-ring: #7fe7eb;

  /* Tipografia */
  --marketing-font-body: var(--f-sans);
  --marketing-font-display: var(--f-sans);
  --marketing-font-accent: var(--f-display);
  --marketing-font-meta: var(--f-mono);
  --marketing-display-narrative-weight: 300;
  --marketing-display-transactional-weight: 400;
  --marketing-display-accent-weight: 400;
  --marketing-nav-font-size: 13px;

  /* Forma, elevação e movimento */
  --marketing-radius-control: 10px;
  --marketing-radius-card-sm: 16px;
  --marketing-radius-card: 20px;
  --marketing-radius-card-lg: 24px;
  --marketing-radius-pill: 999px;
  --marketing-shadow-card: 0 24px 64px rgba(0, 0, 0, 0.28);
  --marketing-shadow-card-hover: 0 30px 78px rgba(0, 0, 0, 0.36);
  --marketing-shadow-teal: 0 18px 48px rgba(2, 184, 191, 0.2);
  --marketing-shadow-violet: 0 18px 48px rgba(123, 97, 255, 0.18);
  --marketing-motion-fast: 180ms;
  --marketing-motion-base: 280ms;
  --marketing-motion-slow: 420ms;
  --marketing-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --marketing-container: 1240px;
  --marketing-gutter: clamp(20px, 5vw, 64px);
  --marketing-section-space: clamp(82px, 10vw, 148px);

  background: var(--marketing-color-background);
  color: var(--marketing-color-text);
  font-family: var(--marketing-font-body);
}

body.marketing-surface .marketing-display--narrative,
body.marketing-surface .marketing-display--transactional {
  font-family: var(--marketing-font-display);
  font-style: normal;
}

body.marketing-surface .marketing-display--narrative {
  font-weight: var(--marketing-display-narrative-weight);
}

body.marketing-surface .marketing-display--transactional {
  font-weight: var(--marketing-display-transactional-weight);
}

body.marketing-surface .marketing-display-accent {
  color: var(--marketing-color-teal-light);
  font-family: var(--marketing-font-accent);
  font-style: italic;
  font-weight: var(--marketing-display-accent-weight);
  letter-spacing: -0.02em;
}

@media (max-width: 920px) {
  body.marketing-surface {
    --marketing-nav-font-size: 14px;
  }
}