/**
 * Mood Safe — Design Tokens
 * https://moodsafe.com.br
 *
 * Importar ANTES de styles.css e store-ui.css
 *
 * Identidade: as duas cores vêm do logotipo — indigo #2F4597 ("mood") e
 * verde #357844 ("safe"). Tudo o mais é tint/shade derivado dessas duas
 * matizes, sobre superfícies quase brancas.
 *
 * Acessibilidade: todo par texto/fundo usado no produto atende WCAG AA
 * (4.5:1 para corpo, 3:1 para títulos grandes). Ambas as cores de marca
 * funcionam tanto como texto sobre branco quanto como preenchimento com
 * texto branco, o que mantém o sistema simples.
 */

:root {
  /* ── Brand colors ── */
  /* #2F4597 = hsl(227 53% 39%), lido direto do logotipo */
  --ms-color-primary: #2f4597;
  --ms-color-primary-dark: #23346f;
  --ms-color-primary-light: #5a6fcb;
  --ms-color-primary-soft: #eff1fc;
  /* #357844 = hsl(133 39% 34%), lido direto do logotipo */
  --ms-color-accent: #357844;
  --ms-color-accent-hover: #2a6136;
  --ms-color-accent-soft: #ebf3ed;
  /* Laranja de alerta: única matiz fora da marca, reservada a risco/urgência */
  --ms-color-accent-warm: #d24704;
  --ms-color-accent-warm-hover: #b03b03;

  /* ── Surfaces ── */
  --ms-color-surface: #f8f9fc;
  --ms-color-surface-elevated: #ffffff;
  --ms-color-surface-muted: #f1f3f9;
  --ms-color-surface-dark: #10141f;
  --ms-color-surface-dark-alt: #1a1f2e;

  /* ── Text ── */
  --ms-color-text: #1f2430;
  --ms-color-text-muted: #525c6b;
  --ms-color-text-on-dark: #f8fafc;
  --ms-color-text-on-accent: #ffffff;

  /* ── Borders & shadows ── */
  --ms-color-border: #e4e7f0;
  --ms-color-border-strong: #c9cee0;
  --ms-color-border-accent: rgba(53, 120, 68, 0.32);
  --ms-color-focus-ring: rgba(47, 69, 151, 0.22);
  /* Sombras leves — hierarquia por superfície, não por elevação. */
  --ms-shadow-sm: 0 1px 2px rgba(16, 20, 31, 0.04);
  --ms-shadow-md: 0 4px 16px rgba(16, 20, 31, 0.06);
  --ms-shadow-lg: 0 16px 40px rgba(16, 20, 31, 0.1);

  /* ── Gradients ── */
  --ms-gradient-body-light: linear-gradient(180deg, #ffffff 0%, var(--ms-color-surface) 320px, var(--ms-color-surface) 100%);
  --ms-gradient-body-dark: linear-gradient(180deg, #10141f 0%, #1a1f2e 100%);
  --ms-gradient-hero: linear-gradient(135deg, var(--ms-color-primary-dark) 0%, var(--ms-color-primary) 55%, var(--ms-color-primary-light) 100%);
  --ms-gradient-band-light: linear-gradient(180deg, #ffffff 0%, var(--ms-color-primary-soft) 100%);

  /* Scrim escuro entre a foto do hero e o texto. Precisa ser forte: a foto é
     enviada pelo admin, então não há garantia de que seja escura. Com 0.55 no
     ponto mais claro, mesmo uma foto quase branca cai para ~#666, o que mantém
     o texto branco acima de 4.5:1. */
  --ms-gradient-hero-scrim: linear-gradient(
    180deg,
    rgba(12, 16, 26, 0.68) 0%,
    rgba(12, 16, 26, 0.55) 45%,
    rgba(12, 16, 26, 0.78) 100%
  );
  --ms-shadow-text-on-media: 0 1px 3px rgba(0, 0, 0, 0.55);

  /* ── Typography ── */
  /* Rubik (logo): display mais clean — peso médio, tracking apertado, sentence case. */
  --ms-font-display: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ms-letter-spacing-display: -0.035em;
  --ms-letter-spacing-body: -0.01em;
  --ms-line-height-body: 1.5;

  --ms-font-size-xs: 0.75rem;
  --ms-font-size-sm: 0.875rem;
  --ms-font-size-base: 1rem;
  --ms-font-size-lg: 1.125rem;
  --ms-font-size-xl: 1.5rem;
  --ms-font-size-2xl: 2rem;
  --ms-font-size-3xl: 2.75rem;
  --ms-font-size-display: 3.25rem;

  --ms-font-weight-normal: 400;
  --ms-font-weight-medium: 500;
  --ms-font-weight-semibold: 600;
  --ms-font-weight-bold: 700;

  /* ── Spacing & radius ── */
  --ms-space-section: 5.5rem;
  --ms-space-section-sm: 3.5rem;
  --ms-space-gap: 1.75rem;
  --ms-radius-sm: 0.5rem;   /* 8 */
  --ms-radius-md: 0.75rem;  /* 12 */
  --ms-radius-lg: 1rem;     /* 16 */
  --ms-radius-xl: 1.5rem;   /* 24 */
  --ms-radius-2xl: 2rem;    /* 32 */
  --ms-radius-pill: 9999px;

  /* ── Layout shells (2 medidas) ──
     Wide  = hero + footer (full-bleed com gutters laterais, sem max-width).
     Narrow = page-bands, forms, legal, testimonials, featured, etc.
     Gutters espelham o inset do hero/footer: clamp(12px, 2.5vw, 28px). */
  --ms-shell-gutter: clamp(12px, 2.5vw, 28px);
  --ms-shell-wide: none;
  --ms-shell-narrow: 68.75rem; /* 1100px — um pouco menor que o wide full-bleed */

  /* ── Transitions / motion ── */
  --ms-transition-fast: 160ms ease;
  --ms-transition-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  --ms-transition-page: 380ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Aliases (compatibilidade com classes store-*) ── */
  --store-primary: var(--ms-color-primary);
  --store-accent: var(--ms-color-accent);
  --store-text: var(--ms-color-text);
  --store-text-inverse: var(--ms-color-text-on-dark);
}

/**
 * Dark mode — as duas cores de marca são escuras demais para servirem de texto
 * sobre fundo escuro, então sobem em luminosidade mantendo a matiz do logotipo
 * (227° e 133°). Em preenchimentos, o texto passa a ser tinta escura.
 */
html[data-bs-theme="dark"] {
  --ms-color-primary: #8b9be4;
  --ms-color-primary-dark: #7d90e0;
  --ms-color-primary-light: #a9b6ef;
  --ms-color-primary-soft: #1a1f2e;
  --ms-color-accent: #6fbf83;
  --ms-color-accent-hover: #5aa96e;
  --ms-color-accent-soft: #16261c;
  --ms-color-accent-warm: #f97e3c;
  --ms-color-accent-warm-hover: #e86a26;

  --ms-color-surface: #10141f;
  --ms-color-surface-elevated: #1a1f2e;
  --ms-color-surface-muted: #232937;

  --ms-color-text: #f1f3f9;
  --ms-color-text-muted: #9aa5b8;
  --ms-color-text-on-accent: #10141f;

  --ms-color-border: rgba(154, 165, 184, 0.24);
  --ms-color-border-strong: rgba(154, 165, 184, 0.42);
  --ms-color-border-accent: rgba(111, 191, 131, 0.35);
  --ms-color-focus-ring: rgba(139, 155, 228, 0.32);
  --ms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --ms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --ms-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.45);
}