/* Design tokens compartilhados. Cada nicho redefine só o que muda, em themes/<nicho>.css. */
:root {
  /* tipografia */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-weight: 800;
  --display-track: -0.02em;
  --display-case: none;

  /* cor */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f4f1;
  --surface-3: #ebe9e4;
  --ink: #171512;
  --ink-2: #66625b;
  --ink-3: #8f8a82; /* só para texto grande ou decorativo */
  --line: rgba(23, 21, 18, 0.1);
  --line-strong: rgba(23, 21, 18, 0.2);
  --brand: #d8381c;
  --brand-ink: #ffffff;
  --brand-soft: color-mix(in srgb, var(--brand) 9%, var(--surface));
  --accent: #f4b02a;
  --ok: #17803f;
  --danger: #c62828;
  --wa: #1fa855;
  --wa-ink: #ffffff;
  --overlay: rgba(12, 10, 8, 0.55);

  /* forma e sombra */
  --r-xs: 8px;
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 24px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(20, 16, 12, 0.06), 0 2px 10px rgba(20, 16, 12, 0.05);
  --sh-2: 0 10px 28px -12px rgba(20, 16, 12, 0.28);
  --sh-3: 0 28px 70px -24px rgba(20, 16, 12, 0.45);

  /* movimento */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layout */
  --gutter: 16px;
  --maxw: 1120px;
  --demo-h: 38px;
  --hdr-h: 60px;
  --cats-h: 54px;
  --card-media-r: var(--r-m);

  /* camadas */
  --z-cats: 35;
  --z-hdr: 40;
  --z-cartbar: 50;
  --z-sheet: 60;
  --z-toast: 90;

  color-scheme: light;
}

@media (min-width: 720px) {
  :root {
    --gutter: 28px;
    --hdr-h: 68px;
  }
}