:root {
  color-scheme: dark;

  /* Street Bento — canonical palette */
  --sb-ink-950: #070908;
  --sb-ink-900: #0d100e;
  --sb-ink-800: #161b18;
  --sb-ink-700: #222923;
  --sb-bone-100: #f5f1e7;
  --sb-bone-200: #e7e1d4;
  --sb-muted-500: #a5ada6;
  --sb-volt-400: #ffe100;
  --sb-volt-500: #f4d600;
  --sb-ember-500: #ff5326;
  /* Laranja escuro para TEXTO sobre fundo claro: o ember puro dá 2.86:1
     sobre o bone e sobre o volt, abaixo do mínimo legível. */
  --sb-ember-600: #ce2b00;
  --sb-signal-500: #29d66f;
  --sb-focus-400: #91c8ff;
  --sb-danger-500: #ff5f57;
  --sb-line-dark: rgb(7 9 8 / 13%);
  --sb-line-light: rgb(245 241 231 / 15%);

  /* Typography */
  --sb-font-display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --sb-font-body: "Manrope", "Segoe UI", sans-serif;
  --sb-type-hero: clamp(2.75rem, 12vw, 5.5rem);
  --sb-type-display: clamp(2.25rem, 9vw, 4.25rem);
  --sb-type-card: clamp(2rem, 8.6vw, 3.2rem);
  --sb-type-title: clamp(1.5rem, 6vw, 2.15rem);
  --sb-type-body-lg: clamp(1.0625rem, 3.8vw, 1.25rem);
  --sb-type-body: 1rem;
  --sb-type-small: 0.8125rem;
  --sb-type-label: 0.6875rem;

  /* Spacing */
  --sb-space-1: 0.25rem;
  --sb-space-2: 0.5rem;
  --sb-space-3: 0.75rem;
  --sb-space-4: 1rem;
  --sb-space-5: 1.25rem;
  --sb-space-6: 1.5rem;
  --sb-space-8: 2rem;
  --sb-space-10: 2.5rem;
  --sb-space-12: 3rem;
  --sb-space-16: 4rem;
  --sb-space-20: 5rem;
  --sb-page-max: 46rem;
  --sb-page-gutter: clamp(1rem, 4.5vw, 1.5rem);
  --sb-section-space: clamp(4rem, 12vw, 6.5rem);

  /* Shape and depth */
  --sb-radius-sm: 0.75rem;
  --sb-radius-control: 1rem;
  --sb-radius-bento: 1.5rem;
  --sb-radius-media: 1.55rem;
  --sb-radius-card: 2rem;
  --sb-radius-pill: 999px;
  --sb-shadow-card: 0 2rem 6rem rgb(0 0 0 / 48%);
  --sb-shadow-action: 0 0.9rem 2.4rem rgb(244 214 0 / 24%);

  /* Motion */
  --sb-duration-instant: 100ms;
  --sb-duration-quick: 140ms;
  --sb-duration-ui: 240ms;
  --sb-duration-reveal: 520ms;
  --sb-duration-enter: 680ms;
  --sb-duration-image: 880ms;
  --sb-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --sb-ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --sb-ease-exit: cubic-bezier(0.3, 0, 1, 1);

  /* Z-index */
  --sb-z-base: 0;
  --sb-z-raised: 10;
  --sb-z-floating: 30;
  --sb-z-toast: 50;
  --sb-z-skip: 100;

  /* Compatibility aliases until the page is repainted */
  --color-bg: var(--sb-ink-950);
  --color-surface: var(--sb-ink-900);
  --color-surface-raised: var(--sb-ink-800);
  --color-surface-soft: var(--sb-ink-700);
  --color-text: var(--sb-bone-100);
  --color-text-soft: var(--sb-bone-200);
  --color-text-muted: var(--sb-muted-500);
  --color-line: var(--sb-line-light);
  --color-action: var(--sb-volt-400);
  --color-action-strong: var(--sb-volt-500);
  --color-orange: var(--sb-ember-500);
  --color-green: var(--sb-signal-500);
  --color-focus: var(--sb-focus-400);
  --font-display: var(--sb-font-display);
  --font-body: var(--sb-font-body);
  --text-display: var(--sb-type-hero);
  --text-h1: var(--sb-type-display);
  --text-h2: var(--sb-type-display);
  --text-h3: var(--sb-type-title);
  --text-body: var(--sb-type-body);
  --page-max: var(--sb-page-max);
  --page-gutter: var(--sb-page-gutter);
  --section-space: var(--sb-section-space);
  --radius-sm: var(--sb-radius-sm);
  --radius-md: var(--sb-radius-bento);
  --radius-lg: var(--sb-radius-card);
  --shadow-card: var(--sb-shadow-card);
  --shadow-action: var(--sb-shadow-action);
  --duration-fast: var(--sb-duration-quick);
  --duration-ui: var(--sb-duration-ui);
  --duration-reveal: var(--sb-duration-reveal);
  --ease-out: var(--sb-ease-enter);
}