:root {
  /* ── Cores base ── */
  --black:   #111111;
  --white:   #FFFFFF;
  --grey:    #888580;

  /* ── Sistema tricolor do ecossistema ── */
  --brands:  #00E5C8;   /* BOON.BRANDS — Clareza */
  --brain:   #FFE600;   /* BOON.BRAIN  — Consistência */
  --lab:     #FF2D9B;   /* BOON.LAB    — Escala */

  /* Aliases legados (não quebrar CSS existente da v1) */
  --cyan:    var(--brands);
  --magenta: var(--lab);
  --yellow:  var(--brain);

  /* ── Tipografia ── */
  --font-display: 'AntonLocal', 'Anton', sans-serif;
  --font-body: 'Darker Grotesque', 'Helvetica Neue', Arial, sans-serif;

  /* ── Espaçamento ── */
  --nav-h: 72px;
  --pad-x: clamp(24px, 5vw, 80px);
  --pad-section: clamp(80px, 10vw, 160px);

  /* ── Bordas ── */
  --border-subtle:      1px solid rgba(255, 255, 255, 0.08);
  --border-subtle-dark: 1px solid rgba(0, 0, 0, 0.1);

  /* ── Easing curves (Emil / custom) ── */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* UI interactions — snappy */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* On-screen movement */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* iOS-like panels */

  /* ── Sombras multicamada (smooth, sem borda dura) ── */
  --shadow-sm:
    0 1px 2px rgba(0,0,0, 0.08),
    0 2px 6px rgba(0,0,0, 0.06);
  --shadow-md:
    0 2px 4px rgba(0,0,0, 0.08),
    0 6px 16px rgba(0,0,0, 0.10),
    0 16px 40px rgba(0,0,0, 0.06);
  --shadow-lg:
    0 4px 8px rgba(0,0,0, 0.10),
    0 12px 32px rgba(0,0,0, 0.12),
    0 32px 80px rgba(0,0,0, 0.08);
}

/* ── Font smoothing global (principle #8 — make-interfaces-feel-better) ── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;  /* principle #9 */
  text-rendering: optimizeLegibility;
}