/* ==========================================================================
   Design Tokens — Grou Conecta Design System V2
   All values as CSS custom properties. Referenced by all other CSS files.
   ========================================================================== */

:root {
  /* === BRAND — Navy === */
  --grou-navy: #152e81;
  --grou-navy-50: #eef2ff;
  --grou-navy-100: #dbe4ff;
  --grou-navy-200: #bfcfff;
  --grou-navy-400: #6b8cdb;
  --grou-navy-500: #1a3a9e;
  --grou-navy-600: #152e81;
  --grou-navy-700: #112468;
  --grou-navy-800: #0e1f5a;
  --grou-navy-900: #0a1540;

  /* === BRAND — Amber === */
  --grou-amber: #faa41a;
  --grou-amber-50: #fffbeb;
  --grou-amber-100: #fef3c7;
  --grou-amber-200: #fde68a;
  --grou-amber-400: #fbbf24;
  --grou-amber-500: #faa41a;
  --grou-amber-600: #d97706;
  --grou-amber-700: #b45309;

  /* V1 compat aliases */
  --grou-navy-dark: var(--grou-navy-800);
  --grou-navy-light: var(--grou-navy-500);
  --grou-amber-dark: var(--grou-amber-600);
  --grou-amber-light: var(--grou-amber-400);

  /* === SEMANTIC === */
  --color-success: #059669;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;
  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;
  --color-warning: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #92400e;
  --color-info: #0284c7;
  --color-info-light: #e0f2fe;
  --color-info-dark: #0369a1;

  /* V1 compat aliases */
  --color-error: var(--color-danger);
  --color-error-light: var(--color-danger-light);

  /* === SURFACES === */
  --color-bg: #f4f6f9;
  --color-bg-elevated: #ffffff;
  --color-bg-sunken: #e8ecf1;
  --color-bg-overlay: rgba(15, 23, 42, 0.5);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.82);
  --glass-bg-hover: rgba(255, 255, 255, 0.92);
  --glass-border: rgba(255, 255, 255, 0.6);
  --glass-border-strong: rgba(255, 255, 255, 0.8);
  --glass-blur: 12px;
  --glass-blur-heavy: 20px;
  --card-bg-solid: #ffffff;

  /* === TEXT === */
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748b;
  --color-text-muted: #94a3b8;
  --color-text-inverse: #ffffff;
  --color-text-link: #152e81;
  --color-text-link-hover: #1a3a9e;

  /* === BORDERS === */
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.15);
  --color-border-subtle: rgba(15, 23, 42, 0.04);
  --color-border-focus: var(--grou-navy);

  /* === SIDEBAR === */
  --sidebar-bg-start: #152e81;
  --sidebar-bg-end: #0e1f5a;
  --sidebar-header-bg: rgba(255, 255, 255, 0.06);
  --sidebar-footer-bg: rgba(0, 0, 0, 0.15);
  --sidebar-text: rgba(255, 255, 255, 0.7);
  --sidebar-text-active: #ffffff;
  --sidebar-text-muted: rgba(255, 255, 255, 0.4);
  --sidebar-hover: rgba(255, 255, 255, 0.08);
  --sidebar-active: rgba(250, 164, 26, 0.12);
  --sidebar-active-border: var(--grou-amber);
  --sidebar-divider: rgba(255, 255, 255, 0.08);
  --sidebar-logo-bg: rgba(255, 255, 255, 0.95);

  /* V1 compat aliases */
  --sidebar-bg: var(--sidebar-bg-start);
  --sidebar-border: var(--sidebar-divider);

  /* === TYPOGRAPHY === */
  --font-display: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --text-2xs: 0.6875rem;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* === SPACING (4px grid) === */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* === BORDER RADIUS === */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* === SHADOWS — cool-toned, layered === */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 16px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
  --shadow-none: none;

  /* Specialty shadows */
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-card-hover: 0 4px 16px rgba(15, 23, 42, 0.10), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-button: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(21, 46, 129, 0.12);
  --shadow-dropdown: 0 4px 24px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-sidebar: 4px 0 24px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 3px rgba(21, 46, 129, 0.15);
  --shadow-focus-amber: 0 0 0 3px rgba(250, 164, 26, 0.2);
  --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.06);

  /* === MOTION === */
  --duration-instant: 75ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-moderate: 300ms;
  --duration-slow: 400ms;
  --duration-enter: 250ms;
  --duration-exit: 200ms;

  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --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-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.34, 1.8, 0.64, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* V1 compat aliases */
  --transition-fast: var(--duration-fast) var(--ease-default);
  --transition-base: var(--duration-base) var(--ease-default);
  --transition-slow: var(--duration-slow) var(--ease-in-out);

  /* === LAYOUT === */
  --header-height: 56px;
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 60px;
  --cart-drawer-width: 400px;
  --content-max-width: 1320px;
  --content-padding: 24px;
  --dialog-max-width: 960px;

  /* === Z-INDEX === */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-sidebar: 30;
  --z-cart-drawer: 35;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-notification: 60;
  --z-tooltip: 70;

  /* V1 compat aliases */
  --z-cart: var(--z-cart-drawer);

  /* === FORM CONTROLS === */
  --control-bg: #f1f5f9;
  --control-bg-hover: #e8ecf1;
  --control-bg-focus: #ffffff;
  --control-border: rgba(15, 23, 42, 0.1);
  --control-border-hover: rgba(15, 23, 42, 0.2);
  --control-border-focus: var(--grou-navy);
  --control-height: 42px;
  --control-height-sm: 34px;
  --control-height-lg: 48px;
  --control-radius: var(--radius-md);

  /* === CATEGORY BADGES === */
  --cat-passeio: #059669;
  --cat-passeio-bg: #d1fae5;
  --cat-transfer: #152e81;
  --cat-transfer-bg: #dbe4ff;
  --cat-hotel: #d97706;
  --cat-hotel-bg: #fef3c7;

  /* V1 compat aliases */
  --badge-passeio-bg: var(--cat-passeio-bg);
  --badge-passeio-text: var(--cat-passeio);
  --badge-transfer-bg: var(--cat-transfer-bg);
  --badge-transfer-text: var(--cat-transfer);
  --badge-hotel-bg: var(--cat-hotel-bg);
  --badge-hotel-text: var(--cat-hotel);

  /* === STATUS === */
  --status-pendente: #d97706;
  --status-pendente-bg: #fef3c7;
  --status-confirmado: #059669;
  --status-confirmado-bg: #d1fae5;
  --status-cancelado: #dc2626;
  --status-cancelado-bg: #fee2e2;
  --status-pago: #059669;
  --status-pago-bg: #d1fae5;
  --status-faturado: #0284c7;
  --status-faturado-bg: #e0f2fe;
  --status-rascunho: #64748b;
  --status-rascunho-bg: #f1f5f9;

  /* V1 compat aliases */
  --status-novo: var(--color-info);
  --status-aguardando: var(--status-pendente);

  /* === SELECTION & FOCUS === */
  --selection-bg: rgba(250, 164, 26, 0.2);
  --selection-text: inherit;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--grou-navy);
  --focus-ring-amber: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--grou-amber);
}

/* === 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;
  }
}