/* Hallmark · tokens · CMJ Colégio e Curso
 * theme: custom · vibe: "pátio ensolarado, bandeirola, família de bairro"
 * cores tiradas do logo (asa-delta vermelha, amarela e laranja)
 */
:root {
  /* papel e tinta */
  --color-paper:   oklch(97.6% 0.014 88);
  --color-paper-2: oklch(94.2% 0.03 88);
  --color-paper-3: oklch(90% 0.045 86);
  --color-ink:     oklch(23% 0.03 30);
  --color-ink-2:   oklch(36% 0.025 34);
  --color-muted:   oklch(47% 0.022 40);
  --color-rule:    oklch(84% 0.03 75);
  --color-rule-2:  oklch(90% 0.025 80);

  /* marca */
  --color-red:       oklch(55% 0.2 28);
  --color-red-deep:  oklch(46% 0.18 27);
  --color-yellow:    oklch(87% 0.165 92);
  --color-yellow-2:  oklch(82% 0.17 85);
  --color-orange:    oklch(72% 0.17 58);
  --color-on-red:    oklch(98% 0.01 88);
  --color-focus:     oklch(50% 0.22 28);
  --color-whatsapp:  oklch(74% 0.19 150);
  --color-on-whatsapp: oklch(26% 0.07 155);
  --color-shadow:    oklch(23% 0.03 30 / 0.18);
  --color-scrim:     oklch(23% 0.03 30 / 0.55);
  --color-scrim-forte: oklch(20% 0.03 30 / 0.82);
  --color-veu-red:   oklch(40% 0.16 27 / 0.86);
  --color-on-dark-2: oklch(92% 0.02 85 / 0.85);
  --color-erro:      oklch(50% 0.2 28);
  --color-ok:        oklch(52% 0.13 150);

  /* texturas: granulado de filme (sobreposto às faixas de cor) e o símbolo da marca */
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  --texture-asa: url("img/asa.svg");

  /* tipos */
  --font-display: "Gabarito", "Atkinson Hyperlegible Next", sans-serif;
  --font-body:    "Atkinson Hyperlegible Next", "Gabarito", sans-serif;

  /* escala (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: clamp(2.5rem, 5vw, 4rem);

  --text-xs:  0.8125rem;
  --text-sm:  0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.25rem;
  --text-xl:  clamp(1.35rem, 2.2vw, 1.6rem);
  --text-2xl: clamp(1.7rem, 3.4vw, 2.4rem);
  --text-3xl: clamp(2.1rem, 5vw, 3.5rem);
  --text-display: clamp(2.8rem, 8.4vw, 6.6rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --rule: 1px solid var(--color-rule);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-med: 240ms;
  --dur-slow: 700ms;

  --measure: 62ch;
  --page-max: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}