/* ============================================
   Wenjoy Design System - CSS Variables
   ============================================ */

:root {
  /* Brand tokens */
  --color-brand-purple-deep: #4B118E;
  --color-brand-purple-mid: #6B1B8F;
  --color-brand-magenta: #9B1B7D;
  --color-brand-pink: #F52066;
  --color-brand-coral: #FF3860;
  --color-brand-coral-light: #FF6B85;
  --color-brand-magenta-light: #E879B5;
  --color-brand-magenta-soft: #F5E8F2;

  /* Semantic aliases */
  --color-primary: var(--color-brand-coral);
  --color-primary-light: var(--color-brand-coral-light);
  --color-primary-dark: #E02E52;

  --color-secondary: var(--color-brand-purple-mid);
  --color-secondary-light: var(--color-brand-magenta-light);
  --color-secondary-dark: var(--color-brand-purple-deep);

  --color-accent: var(--color-brand-magenta);

  /* Text */
  --color-text-primary: #1a1f36;
  --color-text-secondary: #5c5f6e;
  --color-text-tertiary: #8b8f9a;
  --color-text-inverse: #FFFFFF;

  /* Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--color-brand-magenta-soft);
  --color-bg-tertiary: #faf8fb;
  --color-bg-dark: var(--color-brand-purple-deep);
  --color-bg-overlay: rgba(75, 17, 142, 0.85);

  /* Borders */
  --color-border: #e8e0ec;
  --color-border-light: #f3edf5;
  --color-border-dark: #d4c8dc;

  /* Status */
  --color-success: #0d7a4a;
  --color-success-light: #e6f5ee;
  --color-success-dark: #065a36;
  --color-warning: #b45309;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #92400e;
  --color-error: #D92D20;
  --color-error-light: #F97066;
  --color-error-dark: #912018;
  --color-info: var(--color-brand-purple-mid);
  --color-info-light: var(--color-brand-magenta-soft);
  --color-info-dark: var(--color-brand-purple-deep);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #4B118E 0%, #9B1B7D 50%, #FF3860 100%);
  --gradient-primary: linear-gradient(135deg, #9B1B7D 0%, #FF3860 100%);
  --gradient-secondary: linear-gradient(135deg, #4B118E 0%, #6B1B8F 100%);
  --gradient-hero: linear-gradient(180deg, #F5E8F2 0%, #ffffff 100%);
  --gradient-accent: linear-gradient(135deg, #F52066 0%, #FF6B85 100%);
  /* Aurora / mesh background (animated via background-size in components.css) */
  --gradient-mesh: linear-gradient(125deg, #4B118E 0%, #6B1B8F 22%, #9B1B7D 45%, #F52066 70%, #FF6B85 100%);
  --gradient-text: var(--gradient-brand);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.55) 100%);

  /* Glass (glassmorphism) */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-blur: 16px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(75 17 142 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(75 17 142 / 0.08), 0 1px 2px -1px rgb(75 17 142 / 0.06);
  --shadow-md: 0 4px 12px -2px rgb(75 17 142 / 0.1);
  --shadow-lg: 0 12px 24px -4px rgb(75 17 142 / 0.12);
  --shadow-xl: 0 20px 32px -8px rgb(75 17 142 / 0.14);
  --shadow-2xl: 0 25px 50px -12px rgb(75 17 142 / 0.18);
  /* Layered elevation for hover lift */
  --shadow-lift: 0 18px 40px -12px rgb(75 17 142 / 0.22), 0 8px 16px -8px rgb(75 17 142 / 0.12);
  /* Colored glow */
  --shadow-glow-coral: 0 8px 24px -6px rgb(255 56 96 / 0.45);
  --shadow-glow-purple: 0 8px 24px -6px rgb(75 17 142 / 0.4);

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;

  /* Typography */
  --font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 2.5rem;
  --font-size-6xl: 3rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  /* Spring-like easing with subtle overshoot for hover/lift micro-interactions */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   Dark mode tokens (preparado, inativo)
   js/theme.js já alterna [data-theme]; ativar
   sobrescrevendo os tokens abaixo no futuro.
   ============================================ */
/*
[data-theme="dark"] {
  --color-text-primary: #f5f2f8;
  --color-text-secondary: #c4bcd0;
  --color-bg-primary: #15101f;
  --color-bg-secondary: #1e1630;
  --color-border: #2c2440;
}
*/

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}