/* Tokens da Orale: paleta do logo (preto, grafite, cinza, branco) + azul só em detalhes */
:root {
  /* primitivos */
  --black-950: #0E0F11;
  --black-900: #17191C;
  --graphite-800: #23262B;
  --graphite-700: #2F333A; /* parede da recepção */
  --grey-500: #6B7079;
  --grey-300: #B9BDC3;
  --grey-200: #DDE0E3;
  --grey-100: #EFF1F2;
  --white: #FFFFFF;
  --blue-600: #1F5FC4;     /* detalhe sobre fundo claro */
  --blue-300: #7FB2FF;     /* detalhe sobre fundo escuro */
  --alert-700: #A5361F;
  --alert-100: #FBEDE8;

  /* semânticos */
  --bg: var(--white);
  --bg-soft: var(--grey-100);
  --bg-ink: var(--black-950);
  --text: var(--black-900);
  --text-muted: #50555E;
  --text-on-ink: #F2F3F4;
  --text-on-ink-muted: #A3A8AF;
  --accent: var(--blue-600);
  --accent-hover: #174C9E;
  --signal: var(--blue-300);
  --line: var(--grey-200);
  --line-ink: rgba(255, 255, 255, .14);
  --focus: var(--blue-300);
  /* botão principal: preto no claro, branco no escuro */
  --cta-bg: var(--black-950);
  --cta-fg: var(--white);
  --cta-hover: var(--graphite-700);

  /* tipografia */
  --font-display: 'Urbanist', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, sans-serif;
  --fs-h1: clamp(2rem, 1.4rem + 2.2vw, 3.2rem);
  --fs-h2: clamp(1.8rem, 1.3rem + 2vw, 2.9rem);
  --fs-h3: 1.2rem;
  --fs-lede: clamp(1.05rem, 1rem + .3vw, 1.2rem);

  /* espaço e forma */
  --gutter: clamp(1rem, .6rem + 2vw, 2rem);
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --radius: 18px;
  --radius-pill: 999px;
  --shadow: 0 18px 50px -24px rgba(6, 10, 32, .45);
  --ease: cubic-bezier(.2, .7, .2, 1);
}