/* Hallmark · tokens · R&B Laser
 * Fonte das cores e da tipografia: Manual de Identidade Visual R&B, 2024, versão 1.0.
 * O manual pede fundos claros, laranja para destaques e Open Sans em textos e títulos.
 */

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/fonts/open-sans-latin-ext.woff2") format("woff2");
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("/fonts/open-sans-latin.woff2") format("woff2");
  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;
}

:root {
  /* Cores do manual */
  --color-paper: oklch(100% 0 0);              /* #ffffff */
  --color-paper-2: oklch(96.1% 0 0);           /* #f2f2f2 */
  --color-ink: oklch(36.3% 0.025 225.1);       /* #304148 */
  --color-accent: oklch(66.2% 0.225 29.6);     /* #ff4433, laranja da marca: linhas e destaques */

  /* Derivadas, para leitura e contraste */
  --color-accent-deep: oklch(56.2% 0.201 30.1); /* #d12e1e, tom do laranja com contraste 5,1:1 no branco e 4,5:1 no cinza claro: botões, faixa e rótulos */
  --color-ink-2: oklch(49.6% 0.021 223.9);     /* #56656b, texto de apoio */
  --color-ink-deep: oklch(28% 0.019 225.3);    /* #1f2b30, só como véu sobre o vídeo e fundo da janela de imagem */
  --color-rule: oklch(91.3% 0.005 214.3);      /* #dfe3e4, fios */
  --color-on-accent: oklch(100% 0 0);
  --color-focus: oklch(36.3% 0.025 225.1);

  /* Tipografia */
  --font-body: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-display: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --display-stretch: 80%;
  --display-weight: 700;
  --display-tracking: -0.015em;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 1.45rem + 2.2vw, 3.25rem);
  --text-3xl: clamp(2.125rem, 1.2rem + 3.6vw, 4.25rem);
  --text-display: clamp(2.875rem, 1.1rem + 8.4vw, 8.5rem);

  /* Espaço, escala de 4 pt */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;
  --space-section: clamp(4.5rem, 2.5rem + 7vw, 8.5rem);

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);
  --page-max: 82.5rem;
  --pad: max(var(--gutter), calc((100% - var(--page-max)) / 2));
  --header-h: 4.75rem;

  /* Forma */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --rule: 1px;
  --beam: 2px;
  --shadow-lift: 0 1.25rem 2.75rem -1.25rem color-mix(in oklch, var(--color-ink) 32%, transparent);

  /* Movimento */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-short: 260ms;
  --dur-med: 520ms;
  --dur-long: 1100ms;
}

@media (max-width: 900px) {
  :root {
    --header-h: 4.25rem;
  }
}