/* =========================================================================
   EMOBI — Design Tokens
   Paleta oficial: #b52d2c (vermelho), #4a4a49 (grafite), #777777 (cinza), #efefef (gelo)
   ========================================================================= */

:root {
  /* Brand */
  --color-primary: #b52d2c;
  --color-primary-600: #9a2625;
  --color-primary-700: #7f1f1e;
  --color-primary-800: #641918;
  --color-primary-100: #f9e3e3;
  --color-primary-50: #fdf3f3;

  --color-secondary: #777777;
  --color-secondary-700: #555555;
  --color-secondary-100: #e8e8e8;

  /* Neutrals */
  --color-ink-900: #1a1a1a;
  --color-ink-800: #2d2d2d;
  --color-ink-700: #4a4a49;
  --color-ink-600: #5c5c5b;
  --color-ink-500: #777777;
  --color-ink-400: #999999;
  --color-ink-300: #bbbbbb;
  --color-ink-200: #d9d9d9;
  --color-ink-100: #efefef;
  --color-ink-50:  #f7f7f7;
  --color-bg:      #ffffff;
  --color-canvas:  #efefef;

  /* Semantic */
  --color-success:    #15803d;
  --color-success-bg: #ecfdf5;
  --color-warning:    #b45309;
  --color-warning-bg: #fef3c7;
  --color-danger:     #b52d2c;
  --color-danger-bg:  #f9e3e3;
  --color-info:       #0369a1;
  --color-info-bg:    #e0f2fe;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Inter', var(--font-sans);

  --fs-xs:   0.75rem;
  --fs-sm:   0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md:   1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.75rem;
  --fs-3xl:  2.25rem;

  --lh-tight: 1.2;
  --lh-snug:  1.35;
  --lh-base:  1.55;

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-7: 2rem;
  --sp-8: 2.5rem;
  --sp-9: 3rem;
  --sp-10: 4rem;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
  --sh-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 3px rgba(26, 26, 26, 0.06);
  --sh-md: 0 4px 12px rgba(26, 26, 26, 0.06);
  --sh-lg: 0 12px 32px rgba(26, 26, 26, 0.08);
  --sh-focus: 0 0 0 4px rgba(181, 45, 44, 0.18);
  --sh-focus-soft: 0 0 0 4px rgba(119, 119, 119, 0.25);

  /* Layout */
  --sidebar-w: 264px;
  --topbar-h: 64px;
  --container-max: 1280px;

  /* Motion */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}