/**
 * AVIVAR Marketing Portal – Design tokens
 * AVIVAR brand colors – professional red palette.
 */

:root {
  /* Colors – AVIVAR brand palette */
  --color-bg: #f8f9fa;
  --color-bg-elevated: #ffffff;
  --color-bg-muted: #f1f3f5;
  --color-surface: #ffffff;
  --color-border: #e1e4e8;
  --color-border-strong: #d1d5db;

  --color-text: #1a1f2e;
  --color-text-muted: #6b7280;
  --color-text-inverse: #ffffff;

  /* AVIVAR primary colors – brand red */
  --color-primary: #cb1141;
  --color-primary-dark: #a00d35;
  --color-primary-light: #e01a52;
  --color-primary-muted: #fce4e9;
  
  --color-accent: #cb1141;
  --color-accent-hover: #a00d35;
  --color-accent-light: #e01a52;
  --color-accent-muted: #fce4e9;

  --color-gradient-start: #f8f9fa;
  --color-gradient-end: #ffffff;

  --color-success: #10b981;
  --color-error: #ef4444;
  --color-focus: #cb1141;

  /* Typography – system font stack */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

  /* Spacing – improved for better content flow */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Shadows – more depth */
  --shadow-sm: 0 2px 4px rgba(44, 40, 37, 0.08);
  --shadow-md: 0 4px 16px rgba(44, 40, 37, 0.12);
  --shadow-lg: 0 12px 32px rgba(44, 40, 37, 0.16);
  --shadow-xl: 0 20px 48px rgba(44, 40, 37, 0.2);

  /* Transitions – respect reduced motion */
  --duration-fast: 0.15s;
  --duration-normal: 0.25s;
  --duration-slow: 0.4s;
  
  /* Animation delays for stagger effects */
  --delay-stagger: 0.05s;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0.01ms;
    --duration-normal: 0.01ms;
    --duration-slow: 0.01ms;
  }
  
  .card,
  .demo-card,
  .stat-card,
  .badge,
  .user-list tbody tr,
  .filter-bar,
  .login-card,
  .login-logo-wrap,
  .login-logo-wrap img,
  .login-card h1,
  .form-group,
  .login-actions .btn {
    animation: none !important;
  }
}