/* ═══════════════════════════════════════════════════════
   MW DESIGN SYSTEM — CORE TOKENS
   Estrutural. Zero cores. Compartilhado entre todos os produtos.
   Cada produto define suas cores em products/{produto}/tokens.css
   ═══════════════════════════════════════════════════════ */

/* ─── Brand Fonts (Montserrat display + Karla body) ─── */
@font-face { font-family: 'Montserrat'; src: url('../../fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/Karla-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/Karla-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/Karla-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('../../fonts/Karla-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* ─── Typography ─── */
  --font-head: 'Montserrat', 'Avenir Next', sans-serif;
  --font: 'Karla', -apple-system, system-ui, sans-serif;

  /* ─── Spacing (4px base) ─── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;

  /* ─── Border Radius ─── */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-full: 100px;

  /* ─── Motion ─── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --dur-micro: 150ms;
  --dur-std: 200ms;
  --dur-card: 280ms;
  --dur-page: 350ms;

  /* ─── Z-index scale ───
     Múltiplos de 100 para deixar folga entre tiers. */
  --z-base:        0;
  --z-content:    10;
  --z-panel:     100;
  --z-dropdown:  150;
  --z-drawer:    200;
  --z-modal:     300;
  --z-palette:   400;
  --z-toast:     500;
  --z-tooltip:   600;
  --z-emergency: 9999;

  /* ─── Focus (mecânica — cor vem do produto) ─── */
  --focus-ring-width: 3px;

  /* ─── Breakpoints (referência — @media ainda usa literais) ─── */
  --bp-sm:  768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1500px;

  /* ─── Density modes (opt-in via --s-dense-*) ─── */
  --density: 1;
  --s-dense-2: calc(8px  * var(--density));
  --s-dense-3: calc(12px * var(--density));
  --s-dense-4: calc(16px * var(--density));
  --s-dense-5: calc(20px * var(--density));
}

[data-density="compact"]     { --density: 0.85; }
[data-density="comfortable"] { --density: 1.15; }