*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Fontes */
  --font-family-primary: "Inter Tight", sans-serif;
  --font-family-secondary: "Plus Jakarta Sans", sans-serif;
  --font-family-utility: "Instrument Sans", sans-serif;

  /* Pesos */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Cores */
  --color-brand-primary: #710606;
  --color-brand-secondary: #c8230d;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-details: #ebebeb;

  /* Tons Auxiliares */
  --color-gray-950: #e1e1e6;
  --color-gray-900: #c4c4cc;
  --color-gray-200: #121214;

  /* Superfícies do site */
  --color-surface-dark: #121212;
  --color-surface-elevated: #1b1b1b;
  --color-text-muted: #c2c2c2;
  --color-accent: #e22812;
  --color-accent-hover: var(--color-brand-secondary);
  --color-accent-border: #ed1515;
  --color-highlight: #f44e00;
  --color-alert-background: rgba(237, 46, 21, 0.1);
  --color-alert-border: #ff3f26;
  --color-alert-text: #fff3f1;
  --color-divider: #484848;
  --color-eyebrow-border: #ff1111;
  --color-card-border: #272835;
  --color-card-background: rgba(31, 31, 31, 0.1);
  --color-panel-active: rgba(255, 255, 255, 0.1);
  --color-panel-divider: rgba(178, 178, 178, 0.1);
  --color-department-icon-active: #ed2e15;
  --color-department-icon-glow: rgba(255, 215, 178, 0.92);
  --color-surface-deep: #050505;
  --color-surface-panel: #0a0a0b;
  --color-border-subtle: #18181b;
  --color-border-card-dark: #131315;
  --color-text-subtle: #94949e;
  --color-text-soft: #e5e5e7;
  --color-success-start: #42ea5e;
  --color-success-end: #12bb2e;

  /* Cores semânticas */
  --color-background: var(--color-white);
  --color-text: var(--color-black);

  /* Tamanhos Mobile */
  --font-size-h1: 2.5rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --font-size-button: 1.125rem;

  /* Altura de linha */
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --line-height-small: 1;
}

html {
  font-family: var(--font-family-primary);
}

body{
  min-height: 100vh;
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: var(--font-family-primary);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}

h1 {
  font-size: var(--font-size-h1);
}

h2 {
  font-size: var(--font-size-h2);
}

h3 {
  font-size: var(--font-size-h3);
}

h4 {
  font-size: var(--font-size-h4);
}

p {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
}

.text-small {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-small);
}

button,
.button {
  font-family: var(--font-family-primary);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-small);
}

@media (min-width: 768px) {
  :root {
    /* Tamanhos Desktop */
    --font-size-h1: 4rem; /* 64px */
    --font-size-h2: 3rem; /* 48px */
    --font-size-h3: 2rem; /* 32px */
    --font-size-h4: 1.625rem; /* 26px */
  }
}