/* Conceitual Contadoras Associadas: tokens do design system.
 * Gerado a partir de tokens.json. Não edite este arquivo à mão:
 * altere o design system e gere de novo, senão o site e o sistema divergem.
 * Institucional bordô #7b1b2e. Gerado em 2026-09-18.
 */

@font-face {
  font-family: "Messapia";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Messapia-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Messapia";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Messapia-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Segoe UI Variable Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SegoeUIVariable-Text-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Segoe UI Variable Text";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/SegoeUIVariable-Text-Semibold.woff2") format("woff2");
}
@font-face {
  font-family: "Segoe UI Variable Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/SegoeUIVariable-Display-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Segoe UI Variable Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/SegoeUIVariable-Display-Semibold.woff2") format("woff2");
}

/* Tema claro, o padrão. */
:root,
[data-theme="light"] {
  --brand: #7b1b2e;
  --brand-hover: #671626;
  --brand-active: #55111f;
  --on-brand: #ffffff;
  --brand-text: #7b1b2e;
  --brand-subtle: #fbeef1;
  --brand-border: #edc9d3;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f6f3f5;
  --surface-inverse: #211d22;
  --ink: #211d22;
  --ink-muted: #5c545e;
  --ink-subtle: #867c88;
  --on-inverse: #faf7f9;
  --border: #e2dce2;
  --border-strong: #877e88;
  --focus-ring: #6a1526;
  --focus-ring-inverse: #ffffff;
  --success: #0f6e66;
  --on-success: #ffffff;
  --warning: #8a5a06;
  --on-warning: #ffffff;
  --danger: #b03a10;
  --on-danger: #ffffff;
  --info: #1d5e94;
  --on-info: #ffffff;
  --shadow-sm: 0 1px 2px rgba(36, 31, 31, 0.08);
  --shadow-md: 0 4px 12px rgba(36, 31, 31, 0.10);
  --shadow-lg: 0 12px 32px rgba(36, 31, 31, 0.14);
}

/* Tema escuro. Aplique com data-theme="dark" no <html>. */
[data-theme="dark"] {
  --brand: #93223a;
  --brand-hover: #7b1b2e;
  --brand-active: #671626;
  --brand-text: #f2a6b6;
  --brand-subtle: #3a1a24;
  --brand-border: #66303f;
  --surface: #161317;
  --surface-raised: #201c21;
  --surface-sunken: #100d11;
  --surface-inverse: #0a080b;
  --ink: #f4f0f3;
  --ink-muted: #bdb4bd;
  --ink-subtle: #8b828d;
  --on-inverse: #f4f0f3;
  --border: #322c33;
  --focus-ring: #f2a6b6;
  --success: #35b5a9;
  --on-success: #04211f;
  --warning: #e3ae3e;
  --on-warning: #2a1c00;
  --danger: #ff8f5c;
  --on-danger: #331206;
  --info: #7cc0ea;
  --on-info: #06202f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62);
}

/* E automaticamente quando o sistema do visitante pede escuro,
   a menos que o claro tenha sido escolhido explicitamente. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #93223a;
    --brand-hover: #7b1b2e;
    --brand-active: #671626;
    --brand-text: #f2a6b6;
    --brand-subtle: #3a1a24;
    --brand-border: #66303f;
    --surface: #161317;
    --surface-raised: #201c21;
    --surface-sunken: #100d11;
    --surface-inverse: #0a080b;
    --ink: #f4f0f3;
    --ink-muted: #bdb4bd;
    --ink-subtle: #8b828d;
    --on-inverse: #f4f0f3;
    --border: #322c33;
    --focus-ring: #f2a6b6;
    --success: #35b5a9;
    --on-success: #04211f;
    --warning: #e3ae3e;
    --on-warning: #2a1c00;
    --danger: #ff8f5c;
    --on-danger: #331206;
    --info: #7cc0ea;
    --on-info: #06202f;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62);
  }
}

:root {
  /* Espaçamento */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  /* Raios */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  /* Famílias tipográficas */
  --font-display: Messapia, "Arial Black", Impact, system-ui, sans-serif;
  --font-sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-sans-display: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
}

/* Estilos de texto. Aplique a classe no elemento. */
.display-xl {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 56px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.display-l {
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 46px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.display-m {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 38px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.heading-l {
  font-family: var(--font-sans-display);
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
}
.heading-m {
  font-family: var(--font-sans-display);
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}
.heading-s {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.body-l {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
}
.body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}
.label {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
}
.overline {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.09em;
}