/* Dandaras para Sempre: tokens de design
   Paleta tirada da própria marca: o laranja do portfólio e dos convites, o marrom do letreiro do logo,
   e as cores dos turbantes do logo (vermelho, ouro, verde e azul-petróleo). */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/pinyon-script-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* marca */
  --laranja: #F36C21;          /* laranja Dandaras: fundos, raios do sol, títulos grandes */
  --laranja-escuro: #C9480C;   /* botões com texto branco e links (4,76:1 no branco) */
  --laranja-profundo: #A63C0A; /* hover */
  --terra: #4E2317;            /* marrom do letreiro do logo: rodapé, blocos escuros */
  --tinta: #2B1610;            /* texto principal */
  --tinta-suave: #6B4F42;      /* texto de apoio (7,4:1 no branco) */
  --creme: #FFF1E6;            /* fundo alternado e texto claro sobre o marrom */
  --pessego: #FFD9BF;          /* anéis, detalhes */
  --branco: #FFFFFF;

  /* cores dos turbantes: uma por programa */
  --vermelho: #AA221F;   /* memória e arte */
  --ouro: #E9A92B;       /* destaques (sempre com texto escuro) */
  --verde: #1D6B3A;      /* ações sociais */
  --petroleo: #13506A;   /* kickboxing */
  --preto-logo: #1C1914; /* silhuetas do logo */

  /* papéis */
  --bg: var(--branco);
  --bg-alt: var(--creme);
  --texto: var(--tinta);
  --texto-apoio: var(--tinta-suave);
  --cta: var(--laranja-escuro);
  --cta-hover: var(--laranja-profundo);
  --sobre-escuro: var(--creme);
  --foco: #1F6FEB;

  /* tipografia */
  --fonte: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fonte-assinatura: "Pinyon Script", "Brush Script MT", cursive;
  --t-display: clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);
  --t-h1: clamp(2.4rem, 1.5rem + 3.9vw, 4.6rem);
  --t-h2: clamp(1.85rem, 1.35rem + 2vw, 2.75rem);
  --t-h3: clamp(1.25rem, .95rem + 1.2vw, 1.85rem);
  --t-h4: clamp(1.2rem, 1.08rem + .5vw, 1.45rem);
  --t-numero: clamp(3rem, 2.4rem + 2vw, 4rem);
  --t-lead: clamp(1.08rem, 1rem + .35vw, 1.25rem);
  --t-corpo: 1.0625rem;
  --t-pequeno: .9375rem;

  /* espaço (base 4) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --secao: clamp(4rem, 2.6rem + 5vw, 7rem);

  /* forma */
  --raio-botao: 10px;
  --raio-card: 16px;
  --raio-painel: 20px;
  --raio-pilula: 999px;
  --sombra-foto: 0 18px 40px -18px rgba(43, 22, 16, .45);
  --sombra-contorno: 0 0 0 1px rgba(43, 22, 16, .07), 0 14px 30px -22px rgba(43, 22, 16, .5);
  --sombra-contorno-forte: 0 0 0 1px rgba(43, 22, 16, .09), 0 24px 44px -22px rgba(43, 22, 16, .55);
  --sombra-menu: 0 16px 36px -12px rgba(43, 22, 16, .28);

  /* layout */
  --largura: 1200px;
  --largura-texto: 42rem;
  --margem: 1.25rem;
  --header-h: 76px;

  /* movimento */
  --rapido: 160ms;
  --medio: 320ms;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
}
@media (min-width: 760px) { :root { --margem: 2rem; } }
@media (min-width: 1200px) { :root { --margem: 3rem; } }