/* Krav Maga Mogi & Suzano — tokens do design system.
   Gerado a partir do design system. Não edite valores aqui à mão:
   mude no design system e regere este arquivo. */

:root,
[data-theme="dark"] {
  --surface-000: #0a0a0a;
  --surface-100: #121212;
  --surface-200: #1c1c1c;
  --ink: #f5f5f5;
  --ink-muted: #b5b5b5;
  --brand: #e30613;
  --brand-hover: #b0040f;
  --on-brand: #ffffff;
  --accent: #3b8345;
  --accent-hover: #4a9d56;
  --on-accent: #ffffff;
  --steel: #c0c0c0;
  --line: #2b2b2b;
  --line-strong: #626262;
  --focus: #4c8dff;
  --overlay: #000000cc;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.7);
  --shadow-cta: 0 6px 18px rgba(227, 6, 19, 0.45);
}

[data-theme="light"] {
  --surface-000: #ffffff;
  --surface-100: #f4f4f5;
  --surface-200: #e9e9eb;
  --ink: #14181a;
  --ink-muted: #4d5255;
  --accent-hover: #2f6a37;
  --line: #d8d8dc;
  --line-strong: #8a8f92;
  --overlay: #000000b3;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.10);
  --shadow-raised: 0 8px 24px rgba(20, 24, 26, 0.12);
  --shadow-cta: 0 6px 18px rgba(227, 6, 19, 0.30);
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;

  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: Roboto, system-ui, -apple-system, sans-serif;
}

/* Estilos de texto */
.display-xl { font-family: var(--font-display); font-size: 56px; line-height: 0.95; font-weight: 700; letter-spacing: -0.01em; }
.display-lg { font-family: var(--font-display); font-size: 40px; line-height: 1.0; font-weight: 700; }
.display-md { font-family: var(--font-display); font-size: 26px; line-height: 1.1; font-weight: 700; }
.eyebrow    { font-family: var(--font-display); font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.18em; }
.lead       { font-family: var(--font-sans); font-size: 20px; line-height: 1.55; font-weight: 400; }
.body       { font-family: var(--font-sans); font-size: 16px; line-height: 1.65; font-weight: 400; }
.body-sm    { font-family: var(--font-sans); font-size: 14px; line-height: 1.6; font-weight: 400; }
.quote      { font-family: var(--font-sans); font-size: 17px; line-height: 1.7; font-weight: 400; font-style: italic; }
.label      { font-family: var(--font-sans); font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.08em; }

@media (max-width: 719px) {
  .display-xl { font-size: 40px; }
  .display-lg { font-size: 30px; }
  .lead { font-size: 18px; }
}