/**
 * Design System - Foundation Styles
 * Purpose: Core design tokens, variables, and system-wide styling foundations
 * 
 * This file contains:
 * - CSS Custom Properties (Design Tokens)
 * - Typography system
 * - Color system
 * - Spacing scale
 * - Shadow system
 * - Animation system
 * - Base HTML element styles
 * 
 * Dependencies: None (foundation layer)
 * 
 * Last Updated: October 19, 2025
 */

/* ========================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ======================================================================== */

:root {
  /* ===== Color System =====
     Paleta "Concierge" (ago/2026) — unificada com o app capture/:
     limestone (mesa de papel), olive (marca/ações) e tinta quente.
     A paleta anterior era o azul Tailwind padrão; os NOMES das
     variáveis foram preservados para não quebrar os componentes —
     só os valores mudaram. */

  /* Primary Brand Colors — verde-oliva (marca) */
  --color-primary: #5c6b4a;
  --color-primary-50: #f1f3ec;
  --color-primary-100: #e4e8da;
  --color-primary-200: #cdd4bc;
  --color-primary-300: #afb996;    /* primary-light */
  --color-primary-400: #8fa075;
  --color-primary-500: #6f8256;    /* primary */
  --color-primary-600: #5c6b4a;    /* base (AA sobre branco: 5.7:1) */
  --color-primary-700: #4a573c;    /* primary-dark */
  --color-primary-800: #3c4630;
  --color-primary-900: #2f3826;

  /* Secondary Brand Colors — tinta quente (ações secundárias) */
  --color-secondary: #4a453d;
  --color-secondary-50: #f4f2f0;
  --color-secondary-100: #e6e3df;
  --color-secondary-200: #cdc8c1;
  --color-secondary-300: #aba49a;
  --color-secondary-400: #857d72;
  --color-secondary-500: #5f594f;  /* secondary */
  --color-secondary-600: #4a453d;
  --color-secondary-700: #3b3731;
  --color-secondary-800: #2e2b26;
  --color-secondary-900: #1a1817;

  /* Semantic Colors — tons harmonizados (sem neon) */
  --color-success: #4a7c59;        /* verde-garrafa */
  --color-success-400: #6f9a7c;    /* bordas/estados leves */
  --color-success-light: #e3ede5;
  --color-success-dark: #2f5239;

  --color-error: #b0433b;          /* vermelho-tijolo */
  --color-error-light: #f6e2df;
  --color-error-dark: #7e2f29;

  --color-warning: #9a5b1f;        /* bronze */
  --color-warning-400: #c08a4f;    /* bordas/estados leves */
  --color-warning-light: #f5e8d5;
  --color-warning-dark: #6e3f14;

  --color-info: #3d5a80;           /* azul-aço (info/links) */
  --color-info-400: #6e88a6;
  --color-info-light: #e3eaf2;
  --color-info-dark: #27405f;

  /* Neutral Colors — rampa de pedra quente */
  --color-neutral-50: #fbf9f5;
  --color-neutral-100: #f3efe8;
  --color-neutral-200: #e7e1d7;
  --color-neutral-300: #d9d2c6;
  --color-neutral-400: #a9a193;
  /* neutral-500 escurecido para #6f6a64 (ago/2026): o #7e786c antigo
     ficava em 4.38:1 sobre branco — abaixo de AA (4.5:1) para texto
     12–14px (tab-subtitle, saved-view chips, labels de filtro).
     Mesmo valor do --muted do capture/: 5.36:1 sobre branco. */
  --color-neutral-500: #6f6a64;
  --color-neutral-600: #5f5a4f;
  --color-neutral-700: #45413a;
  --color-neutral-800: #2e2b26;
  --color-neutral-900: #1a1817;
  --color-neutral-950: #12110f;

  /* Page surface (mesma mesa do capture) */
  --color-bg: #f5f2ec;
  --color-surface: #ffffff;
  
  /* ===== Typography ===== */
  
  /* Font Families
     DM Sans (UI) + Cormorant Garamond (display: nomes de restaurantes,
     wordmark) — mesma dupla do app capture/. Mono só para timers/ids. */
  --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;

  /* Android-specific font stack */
  --font-android: 'DM Sans', 'Roboto', 'Noto Sans', 'Droid Sans', sans-serif;
  
  /* Font Sizes (Type Scale) */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  
  /* Font Weights */
  --font-thin: 100;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
  
  /* ===== Spacing Scale ===== */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;  /* 2px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-1-5: 0.375rem;  /* 6px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-2-5: 0.625rem;  /* 10px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-3-5: 0.875rem;  /* 14px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-7: 1.75rem;     /* 28px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-9: 2.25rem;     /* 36px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-11: 2.75rem;    /* 44px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-14: 3.5rem;     /* 56px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */
  --spacing-32: 8rem;       /* 128px */
  
  /* ===== Border Radius ===== */
  --radius-none: 0;
  --radius-sm: 0.125rem;    /* 2px */
  --radius: 0.25rem;        /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;

  /* ===== Radius — superfícies da coleção (redesign 2026-08) =====
     Escala pedida: card principal 14–18px, cards internos 12–16px,
     inputs 10–14px. Sentam entre os passos existentes sem criar
     valores arbitrários por componente. */
  --radius-card: 0.875rem;       /* 14px — card da coleção */
  --radius-card-inner: 0.75rem;  /* 12px — thumb/badges internos */
  --radius-input: 0.75rem;       /* 12px — inputs/selects */
  
  /* ===== Shadow System ===== */
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  
  /* Interactive Shadows */
  --shadow-hover: 0 6px 12px -2px rgba(0, 0, 0, 0.15), 0 3px 6px -2px rgba(0, 0, 0, 0.08);
  --shadow-active: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.12);
  
  /* ===== Z-Index Scale ===== */
  --z-0: 0;
  --z-10: 10;
  --z-20: 20;
  --z-30: 30;
  --z-40: 40;
  --z-50: 50;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ===== Transition Timing ===== */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-normal: 300ms;
  --transition-slow: 400ms;
  --transition-slower: 500ms;
  
  /* Easing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== Opacity Scale ===== */
  --opacity-0: 0;
  --opacity-5: 0.05;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-25: 0.25;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-75: 0.75;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-95: 0.95;
  --opacity-100: 1;
  
  /* ===== Breakpoints (for reference in media queries) ===== */
  --breakpoint-xs: 375px;   /* Mobile small */
  --breakpoint-sm: 640px;   /* Mobile large */
  --breakpoint-md: 768px;   /* Tablet */
  --breakpoint-lg: 1024px;  /* Laptop */
  --breakpoint-xl: 1280px;  /* Desktop */
  --breakpoint-2xl: 1536px; /* Large desktop */
  
  /* ===== Safe Area Insets (for notched devices) ===== */
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
  
  /* ===== Touch Target Sizes ===== */
  --touch-target-min: 44px;  /* Apple HIG minimum */
  --touch-target-recommended: 48px;  /* Material Design recommendation */
  
  /* ===== Accessibility ===== */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-primary-600);
  --focus-ring-shadow: 0 0 0 3px rgba(92, 107, 74, 0.28);

  /* ===== Chip/Badge Tones (padrão único de tags) =====
     Fonte única de cor para todos os chips/badges do app — antes cada
     renderizador tinha combos próprios (yellow vs amber, gray-50 vs
     gray-100) gerando tags visualmente inconsistentes. */
  --chip-info-bg: #e3eaf2;
  --chip-info-fg: #27405f;
  --chip-success-bg: #e3ede5;
  --chip-success-fg: #2f5239;
  --chip-warning-bg: #f5e8d5;
  --chip-warning-fg: #6e3f14;
  --chip-danger-bg: #f6e2df;
  --chip-danger-fg: #7e2f29;
  --chip-neutral-bg: #f0ece4;
  --chip-neutral-fg: #45413a;
  --chip-accent-bg: #ece6f1;
  --chip-accent-fg: #5c4270;

  /* ===== Aliases de superfície/texto (compatibilidade) =====
     Markup legado (JS-generated) referencia estes nomes com fallbacks
     hexados do Tailwind antigo (#f9fafb, #6b7280, #111827, #9ca3af,
     #e5e7eb) — como os vars não existiam, os fallbacks cinza-frios
     ganhavam sobre o tema. Aliases resolvem para os tokens quentes. */
  --color-bg-secondary: var(--color-neutral-50);
  --color-surface-alt: var(--color-neutral-50);
  --color-surface-secondary: var(--color-neutral-100);
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-500);
  --color-text-tertiary: var(--color-neutral-400);
  --color-border: var(--color-neutral-200);
  /* formManager e amigos referenciam --color-danger com fallback
     #ef4444 (vermelho-500 antigo) — o alias resolve pro tijolo */
  --color-danger: var(--color-error);
}

/* ========================================================================
   DARK MODE — desabilitado propositalmente
   ========================================================================

   A camada de componentes é light-only: cards e seções usam classes
   Tailwind estáticas (bg-white, text-gray-*) que NÃO acompanham uma
   inversão de tokens. Com o bloco dark ativo, usuários com o sistema em
   dark viam bugs de contraste: abas herdando cor de texto clara sobre
   card branco (ilegível), inputs com fundo escuro dentro de cards
   brancos e elementos sobre o body com texto cinza escuro sobre fundo
   quase preto. Enquanto não houver um dark mode completo da camada de
   componentes, o app é intencionalmente light em todos os temas de
   sistema. Para reativar: reintroduzir o bloco de inversão AQUI e
   auditar components.css/application.css/classes Tailwind estáticas. */

/* ========================================================================
   BASE HTML ELEMENTS
   ======================================================================== */

/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  color: var(--color-neutral-800);
  background-color: var(--color-bg);
  /* clip em vez de hidden: overflow-x hidden cria scroll container e
     quebra position:sticky do header em alguns browsers. hidden fica
     como fallback para browsers sem suporte a clip. */
  overflow-x: hidden;
  overflow-x: clip;
  padding-bottom: calc(6rem + var(--safe-area-inset-bottom));

  /* Performance optimizations */
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
}

/* Android-specific font improvements */
@supports (-webkit-touch-callout: none) and (-webkit-tap-highlight-color: transparent) {
  body {
    font-family: var(--font-android);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
  }
}

/* Typography Elements */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-neutral-900);
}

h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-3xl); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin-bottom: var(--spacing-4);
  color: var(--color-neutral-700);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast) var(--ease-out);
}

a:hover {
  color: var(--color-primary-700);
  text-decoration: underline;
}

a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  text-decoration: none;
}

strong, b {
  font-weight: var(--font-semibold);
}

em, i {
  font-style: italic;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.125rem 0.25rem;
  background-color: var(--color-neutral-100);
  border-radius: var(--radius-sm);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  padding: var(--spacing-4);
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-100);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

blockquote {
  padding-left: var(--spacing-4);
  border-left: 4px solid var(--color-primary);
  font-style: italic;
  color: var(--color-neutral-600);
}

hr {
  border: none;
  height: 1px;
  background-color: var(--color-neutral-200);
  margin: var(--spacing-8) 0;
}

/* Lists */
ul, ol {
  padding-left: var(--spacing-6);
  margin-bottom: var(--spacing-4);
}

li {
  margin-bottom: var(--spacing-2);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

/* Visibility */
.hidden { display: none !important; }
.invisible { visibility: hidden !important; }
.visible { visibility: visible !important; }

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus Visible */
.focus-visible:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--focus-ring-shadow);
}

/* Truncate Text */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================================================
   ANIMATIONS & KEYFRAMES
   ======================================================================== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateY(0) translateZ(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px) translateZ(0);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateZ(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0);
  }
  to {
    opacity: 0;
    transform: scale(2);
  }
}

/* Skeleton Loader Animation */
@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Progress Bar Animation */
@keyframes progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ========================================================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================================================== */

/* Remove all animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --color-neutral-100: #ffffff;
    --color-neutral-900: #000000;
  }
  
  button,
  a {
    outline: 2px solid currentColor;
  }
}

/* ========================================================================
   PRINT STYLES
   ======================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a,
  a:visited {
    text-decoration: underline;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
  
  img {
    page-break-inside: avoid;
  }
  
  h2, h3 {
    page-break-after: avoid;
  }
}

/* ========================================================================
   ENHANCED DESIGN SYSTEM - Typography & Spacing Utilities
   Added: October 19, 2025
   Purpose: Extended utility classes for consistent spacing and typography
   ======================================================================== */

/* Vocabulário ÚNICO de tokens (consolidação ago/2026):
   --text-* (tipografia), --spacing-* (espaçamento) e --font-<peso>
   são os canônicos. Os pares legados (--font-size-*, --font-weight-*)
   viram aliases; --space-* e --line-height-* não existem mais.
   ATENÇÃO: as utilities .m-*/.p-*/.gap-* abaixo APONTAM para o
   vocabulário canônico --spacing-* — a versão anterior referenciava
   os tokens --space-* removidos e, com !important, ZERAVA todo o
   espaçamento do Tailwind (painéis sem padding, seções coladas). */
:root {
    /* Aliases do vocabulário canônico --text-* */
    --font-size-base: var(--text-base);
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-md: var(--text-base); /* base */
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --font-size-3xl: var(--text-3xl);
    --font-size-4xl: var(--text-4xl);
    --font-size-5xl: var(--text-5xl);

    /* Aliases do vocabulário canônico --font-<peso> */
    --font-weight-normal: var(--font-normal);
    --font-weight-medium: var(--font-medium);
    --font-weight-semibold: var(--font-semibold);
    --font-weight-bold: var(--font-bold);
    --font-weight-extrabold: var(--font-extrabold);
}

/* Container Widths */
:root {
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
}

/* ========================================================================
   UTILITY CLASSES - Spacing
   ======================================================================== */

/* Margin utilities */
.m-0 { margin: var(--spacing-0) !important; }
.m-1 { margin: var(--spacing-1) !important; }
.m-2 { margin: var(--spacing-2) !important; }
.m-3 { margin: var(--spacing-3) !important; }
.m-4 { margin: var(--spacing-4) !important; }
.m-5 { margin: var(--spacing-5) !important; }
.m-6 { margin: var(--spacing-6) !important; }
.m-8 { margin: var(--spacing-8) !important; }
.m-auto { margin: auto !important; }

/* Margin-top */
.mt-0 { margin-top: var(--spacing-0) !important; }
.mt-1 { margin-top: var(--spacing-1) !important; }
.mt-2 { margin-top: var(--spacing-2) !important; }
.mt-3 { margin-top: var(--spacing-3) !important; }
.mt-4 { margin-top: var(--spacing-4) !important; }
.mt-5 { margin-top: var(--spacing-5) !important; }
.mt-6 { margin-top: var(--spacing-6) !important; }
.mt-8 { margin-top: var(--spacing-8) !important; }
.mt-auto { margin-top: auto !important; }

/* Margin-bottom */
.mb-0 { margin-bottom: var(--spacing-0) !important; }
.mb-1 { margin-bottom: var(--spacing-1) !important; }
.mb-2 { margin-bottom: var(--spacing-2) !important; }
.mb-3 { margin-bottom: var(--spacing-3) !important; }
.mb-4 { margin-bottom: var(--spacing-4) !important; }
.mb-5 { margin-bottom: var(--spacing-5) !important; }
.mb-6 { margin-bottom: var(--spacing-6) !important; }
.mb-8 { margin-bottom: var(--spacing-8) !important; }
.mb-auto { margin-bottom: auto !important; }

/* Margin-left */
.ml-0 { margin-left: var(--spacing-0) !important; }
.ml-1 { margin-left: var(--spacing-1) !important; }
.ml-2 { margin-left: var(--spacing-2) !important; }
.ml-3 { margin-left: var(--spacing-3) !important; }
.ml-4 { margin-left: var(--spacing-4) !important; }
.ml-auto { margin-left: auto !important; }

/* Margin-right */
.mr-0 { margin-right: var(--spacing-0) !important; }
.mr-1 { margin-right: var(--spacing-1) !important; }
.mr-2 { margin-right: var(--spacing-2) !important; }
.mr-3 { margin-right: var(--spacing-3) !important; }
.mr-4 { margin-right: var(--spacing-4) !important; }
.mr-auto { margin-right: auto !important; }

/* Padding utilities */
.p-0 { padding: var(--spacing-0) !important; }
.p-1 { padding: var(--spacing-1) !important; }
.p-2 { padding: var(--spacing-2) !important; }
.p-3 { padding: var(--spacing-3) !important; }
.p-4 { padding: var(--spacing-4) !important; }
.p-5 { padding: var(--spacing-5) !important; }
.p-6 { padding: var(--spacing-6) !important; }
.p-8 { padding: var(--spacing-8) !important; }

/* Padding-top */
.pt-0 { padding-top: var(--spacing-0) !important; }
.pt-1 { padding-top: var(--spacing-1) !important; }
.pt-2 { padding-top: var(--spacing-2) !important; }
.pt-3 { padding-top: var(--spacing-3) !important; }
.pt-4 { padding-top: var(--spacing-4) !important; }
.pt-6 { padding-top: var(--spacing-6) !important; }

/* Padding-bottom */
.pb-0 { padding-bottom: var(--spacing-0) !important; }
.pb-1 { padding-bottom: var(--spacing-1) !important; }
.pb-2 { padding-bottom: var(--spacing-2) !important; }
.pb-3 { padding-bottom: var(--spacing-3) !important; }
.pb-4 { padding-bottom: var(--spacing-4) !important; }
.pb-6 { padding-bottom: var(--spacing-6) !important; }

/* Padding-left */
.pl-0 { padding-left: var(--spacing-0) !important; }
.pl-1 { padding-left: var(--spacing-1) !important; }
.pl-2 { padding-left: var(--spacing-2) !important; }
.pl-3 { padding-left: var(--spacing-3) !important; }
.pl-4 { padding-left: var(--spacing-4) !important; }

/* Padding-right */
.pr-0 { padding-right: var(--spacing-0) !important; }
.pr-1 { padding-right: var(--spacing-1) !important; }
.pr-2 { padding-right: var(--spacing-2) !important; }
.pr-3 { padding-right: var(--spacing-3) !important; }
.pr-4 { padding-right: var(--spacing-4) !important; }

/* Gap utilities (for flexbox/grid) */
.gap-0 { gap: var(--spacing-0) !important; }
.gap-1 { gap: var(--spacing-1) !important; }
.gap-2 { gap: var(--spacing-2) !important; }
.gap-3 { gap: var(--spacing-3) !important; }
.gap-4 { gap: var(--spacing-4) !important; }
.gap-5 { gap: var(--spacing-5) !important; }
.gap-6 { gap: var(--spacing-6) !important; }
.gap-8 { gap: var(--spacing-8) !important; }

/* ========================================================================
   TYPOGRAPHY UTILITIES
   ======================================================================== */

/* Font sizes */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-md) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
.text-3xl { font-size: var(--font-size-3xl) !important; }
.text-4xl { font-size: var(--font-size-4xl) !important; }
.text-5xl { font-size: var(--font-size-5xl) !important; }

/* Font weights */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }

/* Line heights */
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }

/* Text alignment */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* Text transform */
.uppercase { text-transform: uppercase !important; }
.lowercase { text-transform: lowercase !important; }
.capitalize { text-transform: capitalize !important; }

/* Text colors using existing system */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-muted { color: var(--color-neutral-500) !important; }

/* ========================================================================
   SECTION STANDARDIZATION
   ======================================================================== */

/* Standard section spacing */
.section {
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-6);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-neutral-200);
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-4);
    border-bottom: 1px solid var(--color-neutral-200);
}

.section-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-900);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.section-title .material-icons {
    font-size: 1.5rem;
}

.section-actions {
    display: flex;
    gap: var(--spacing-2);
    align-items: center;
}

.section-body {
    /* Standardized content area */
}

.section-footer {
    margin-top: var(--spacing-6);
    padding-top: var(--spacing-4);
    border-top: 1px solid var(--color-neutral-200);
}

/* Bloco .card/.card-header/.card-title/.card-subtitle/.card-footer
   removido (ago/2026): definição duplicada com components.css (padding
   1rem/radius-md aqui vs 1.5rem/radius-xl lá — componentes carregam
   depois e vencem). Fonte única: components.css. *//* ========================================================================
   PALETA "CONCIERGE" — REMAP DAS UTILITIES DE COR DO TAILWIND (v2 CDN)
   ========================================================================

   O build CDN do Tailwind 2 grava valores literais nos utilitários de
   cor e não lê os tokens CSS (diferente do v3+). O markup (HTML e
   templates JS) usa bg-blue-600, text-gray-500 etc. em dezenas de
   arquivos; em vez de editar cada uso, este bloco — carregado DEPOIS
   do Tailwind — remapeia cada família para a paleta Concierge:

     gray-*   → rampa de pedra quente
     blue-600/700 (ações) → oliva; blue-50..200/text-* → azul-aço
     red-*    → tijolo        green-* → garrafa
     yellow/amber/orange → bronze/ouro     purple/indigo → ameixa

   Novos markup devem usar os componentes (.btn, .chip, .input) e os
   tokens — este remap é a camada de compatibilidade do markup legado. */

/* ── Cinzas → rampa de pedra quente ── */
.bg-gray-50 { background-color: #fbf9f5; }
.bg-gray-100 { background-color: #f3efe8; }
.bg-gray-200 { background-color: #e7e1d7; }
.bg-gray-300 { background-color: #d9d2c6; }
.bg-gray-500 { background-color: #7e786c; }
.bg-gray-600 { background-color: #5f5a4f; }
.bg-gray-800 { background-color: #2e2b26; }
.bg-gray-900 { background-color: #1a1817; }
.hover\:bg-gray-50:hover { background-color: #fbf9f5; }
.hover\:bg-gray-100:hover { background-color: #f3efe8; }
.hover\:bg-gray-200:hover { background-color: #e7e1d7; }
.hover\:bg-gray-300:hover { background-color: #d9d2c6; }
.hover\:bg-gray-600:hover { background-color: #5f5a4f; }
.hover\:bg-gray-700:hover { background-color: #45413a; }
.hover\:bg-gray-800:hover { background-color: #2e2b26; }
.hover\:bg-gray-900:hover { background-color: #1a1817; }
.text-gray-300 { color: #d9d2c6; }
/* gray-400/500 escurecidos (ago/2026) para acompanhar o novo neutral-500:
   os hex antigos (#a9a193/#7e786c) deixavam texto 12–14px em 2.6–4.4:1
   sobre branco — abaixo de AA. Como o remap usa LITERAIS (não var()), a
   troca do token não bastava. */
.text-gray-400 { color: #7e786c; }
.text-gray-500 { color: #6f6a64; }
.text-gray-600 { color: #5f5a4f; }
.text-gray-700 { color: #45413a; }
.text-gray-800 { color: #2e2b26; }
.text-gray-900 { color: #1a1817; }
.hover\:text-gray-600:hover { color: #5f5a4f; }
.hover\:text-gray-700:hover { color: #45413a; }
.hover\:text-gray-800:hover { color: #2e2b26; }
.border-gray-100 { border-color: #f3efe8; }
.border-gray-200 { border-color: #e7e1d7; }
.border-gray-300 { border-color: #d9d2c6; }
.hover\:border-gray-300:hover { border-color: #d9d2c6; }

/* ── Azul → oliva (ações) + azul-aço (info/links) ── */
.bg-blue-50 { background-color: #e8eff4; }
.bg-blue-100 { background-color: #d7e2ee; }
.bg-blue-200 { background-color: #c2d2e4; }
.bg-blue-500 { background-color: #6f8256; }
.bg-blue-600 { background-color: #5c6b4a; }
.hover\:bg-blue-50:hover { background-color: #f1f3ec; }
.hover\:bg-blue-700:hover { background-color: #4a573c; }
.text-blue-500,
.text-blue-600,
.text-blue-700 { color: #3d5a80; }
.text-blue-800 { color: #27405f; }
.text-blue-900 { color: #1d3249; }
.hover\:text-blue-600:hover { color: #5c6b4a; }
.hover\:text-blue-700:hover { color: #4a573c; }
.border-blue-100 { border-color: #cbd9e7; }
.border-blue-200 { border-color: #b8c9dd; }
.border-blue-500 { border-color: #6f8256; }
.border-blue-600 { border-color: #5c6b4a; }
.hover\:border-blue-200:hover,
.hover\:border-blue-300:hover { border-color: #afb996; }
.focus\:ring-blue-500:focus { --tw-ring-color: rgba(92, 107, 74, 0.35); }
.focus\:border-blue-500:focus { border-color: #5c6b4a; }
/* Rings sem variante (validação de input no Places, anel de avatar) —
   ficavam no azul Tailwind vivo; mesmo destino dos focus: */
.ring-blue-200 { --tw-ring-color: #cbd9e7; }
.ring-blue-500 { --tw-ring-color: rgba(92, 107, 74, 0.35); }

/* ── Vermelho → tijolo ── */
.bg-red-50 { background-color: #f6e2df; }
.bg-red-100 { background-color: #efcfca; }
.bg-red-600 { background-color: #b0433b; }
.hover\:bg-red-50:hover { background-color: #f6e2df; }
.hover\:bg-red-700:hover { background-color: #8a302b; }
.text-red-400 { color: #c97b74; }
.text-red-500 { color: #b0433b; }
.text-red-600 { color: #a33b34; }
.text-red-700 { color: #8a302b; }
.text-red-800 { color: #6e2622; }
.text-red-900 { color: #4e1b18; }
.hover\:text-red-700:hover { color: #8a302b; }
.border-red-100 { border-color: #efcfca; }
.border-red-200 { border-color: #e3b4ae; }
.border-red-300 { border-color: #d39891; }
.border-red-500 { border-color: #b0433b; }
.hover\:border-red-200:hover { border-color: #e3b4ae; }
.focus\:ring-red-500:focus { --tw-ring-color: rgba(176, 67, 59, 0.35); }

/* ── Verde → garrafa ── */
.bg-green-50 { background-color: #e7efe9; }
.bg-green-100 { background-color: #d4e3d8; }
.bg-green-500 { background-color: #4a7c59; }
.bg-green-600 { background-color: #3f6b4c; }
.bg-emerald-600 { background-color: #3f6b4c; }
.hover\:bg-green-50:hover { background-color: #e7efe9; }
.hover\:bg-green-700:hover,
.hover\:bg-emerald-700:hover { background-color: #33563e; }
.text-green-500,
.text-emerald-500 { color: #4a7c59; }
.text-green-600 { color: #3f6b4c; }
.text-green-700 { color: #33563e; }
.text-green-800 { color: #274231; }
.text-green-900 { color: #1b2f23; }
.hover\:text-green-700:hover { color: #33563e; }
.border-green-100 { border-color: #d4e3d8; }
.border-green-200 { border-color: #b9d0bf; }
.border-green-500 { border-color: #4a7c59; }
.focus\:ring-green-500:focus { --tw-ring-color: rgba(74, 124, 89, 0.35); }

/* ── Amarelo/âmbar/laranja → bronze e ouro ── */
.bg-yellow-50 { background-color: #f9f2e2; }
.bg-yellow-100 { background-color: #f3e7cb; }
.bg-yellow-400 { background-color: #d9b45c; }
.bg-yellow-500 { background-color: #b0893b; }
.bg-yellow-600 { background-color: #97722e; }
.bg-amber-50,
.bg-orange-50 { background-color: #f8eee0; }
.hover\:bg-yellow-600:hover { background-color: #7c5c24; }
.hover\:bg-yellow-700:hover { background-color: #5c4419; }
.hover\:bg-amber-50:hover { background-color: #f8eee0; }
.hover\:bg-amber-100:hover,
.hover\:bg-orange-100:hover { background-color: #f1dfc7; }
.text-yellow-500 { color: #b0893b; }
.text-yellow-600 { color: #97722e; }
.text-yellow-700 { color: #7c5c24; }
.text-yellow-800 { color: #5c4419; }
.text-amber-500 { color: #a16622; }
.text-amber-600 { color: #8a5018; }
.text-amber-700 { color: #6e3f14; }
.text-orange-600 { color: #9a5b1f; }
.hover\:text-amber-800:hover { color: #57320f; }
.border-yellow-400 { border-color: #d9b45c; }
.border-amber-100 { border-color: #f1dfc7; }
.border-amber-200,
.border-orange-200 { border-color: #e5cba6; }
.hover\:border-amber-200:hover { border-color: #e5cba6; }

/* ── Roxo/índigo → ameixa ── */
.bg-purple-50 { background-color: #f1ecf5; }
.bg-purple-100 { background-color: #e5dcf0; }
.bg-purple-600 { background-color: #7a5c8e; }
.hover\:bg-purple-700:hover { background-color: #5c4270; }
.text-purple-500 { color: #7a5c8e; }
.text-purple-600 { color: #6b4e7f; }
.text-purple-700,
.text-indigo-600 { color: #5c4270; }
.text-purple-800 { color: #4a3560; }
.border-purple-100 { border-color: #e5dcf0; }