/* ==========================================================================
   Base: tokens, reset, layout e tipografia
   ========================================================================== */

:root {
  --primary: #f28321;
  --secondary: #008ea1;
  --black: #231f20;
  --sand: #ddb774;
  --font: #ddb774; /* cor do texto do menu */
  --white: #ffffff;

  --font-display: "Antonio", sans-serif;
  --font-body: "Roboto", sans-serif;
}

/* Reset / Global Styles */
* {
  padding: 0;
  margin: 0;
  vertical-align: baseline;
  list-style: none;
  border: 0;
  font-family: var(--font-body);
}

html,
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--black);
  background: var(--white);
  scroll-behavior: smooth; /* rolagem suave */
}

/* Estrutura Principal */
.container {
  width: 100%;
  height: 100%;
}

.content {
  max-width: 1300px;
  margin: 0 auto;
}

/* Tipografia */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.75rem;
  text-transform: uppercase;
}

h2 {
  font-family: var(--font-display);
  font-weight: 100;
  font-size: 3.1875rem;
  text-transform: uppercase;
}

h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 2.1875rem;
}

h5 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.875rem;
}

h6 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
}

time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--secondary);
  background-color: var(--black);
  padding: 2px 10px;
  text-align: center;
}