/* ============================================================================
   CSS Variables - Design System
   Alinhado com @frontend/src/styles/theme/default.ts (darkTheme)
   ============================================================================ */

:root {
  /* ============================================================================
     COLORS
     ============================================================================ */

  /* Background Colors - Alinhado com darkTheme.COLORS.BACKGROUND */
  --color-bg-primary: #0B0F12;
  --color-bg-primary-95: rgba(11, 15, 18, 0.95);
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1F2937;
  --color-bg-tertiary-85: rgba(31, 41, 55, 0.85);
  --color-bg-card: #1F2937;
  --color-bg-elevated: #252d3a;
  --color-bg-overlay: rgba(0, 0, 0, 0.5);

  /* Brand Colors - Alinhado com darkTheme.COLORS.BRAND (indigo) */
  --color-brand: #6366F1;
  --color-brand-hover: #4F46E5;
  --color-brand-accent: #A5B4FC;
  --color-brand-quaternary: #818CF8;
  --color-brand-light: rgba(99, 102, 241, 0.12);
  --color-brand-glow: rgba(99, 102, 241, 0.15);
  --color-brand-glow-strong: rgba(99, 102, 241, 0.3);
  --color-brand-glow-subtle: rgba(99, 102, 241, 0.03);

  /* Text Colors - Alinhado com darkTheme.COLORS.TEXT */
  --color-text-primary: #F3F4F6;
  --color-text-secondary: #D1D5DB;
  --color-text-muted: #9CA3AF;

  /* Feedback Colors - Alinhado com baseTokens.COLORS.FEEDBACK */
  --color-success: #10B981;
  --color-success-bg: #064E3B;
  --color-success-light: rgba(16, 185, 129, 0.12);
  --color-success-border-subtle: rgba(16, 185, 129, 0.2);
  --color-warning: #F59E0B;
  --color-warning-bg: #78350F;
  --color-warning-light: rgba(245, 158, 11, 0.12);
  --color-warning-bg-light: rgba(245, 158, 11, 0.15);
  --color-warning-border-subtle: rgba(245, 158, 11, 0.3);
  --color-error: #EF4444;
  --color-error-bg: #7F1D1D;
  --color-info: #3B82F6;
  --color-info-bg-light: rgba(59, 130, 246, 0.15);
  --color-info-border-subtle: rgba(59, 130, 246, 0.3);

  /* Status Badge Colors - Alinhado com darkTheme.COLORS.STATUS */
  --color-status-success-bg: #064E3B;
  --color-status-success-text: #6EE7B7;
  --color-status-success-border: #047857;

  --color-status-warning-bg: #78350F;
  --color-status-warning-text: #FCD34D;
  --color-status-warning-border: #B45309;

  --color-status-error-bg: #7F1D1D;
  --color-status-error-text: #FCA5A5;
  --color-status-error-border: #B91C1C;

  /* Border Colors - Alinhado com darkTheme.COLORS.BORDER */
  --color-border: #374151;
  --color-border-subtle: #1F2937;

  /* Text on brand backgrounds — always white regardless of theme */
  --color-on-brand: #FFFFFF;

  /* White with alpha - for overlays and shine effects */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);

  /* ============================================================================
     TYPOGRAPHY - Alinhado com baseTokens.FONT
     ============================================================================ */

  /* Font Families */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Font Sizes - Alinhado com baseTokens.FONT.SIZE */
  --text-xs: 0.625rem;    /* 10px - sistema XS */
  --text-xsm: 0.75rem;    /* 12px - sistema XSM */
  --text-sm: 0.875rem;    /* 14px - sistema SM */
  --text-base: 1rem;      /* 16px - sistema MD */
  --text-lg: 1.125rem;    /* 18px - sistema LG */
  --text-xl: 1.5rem;      /* 24px - sistema XL */
  --text-2xl: 2.25rem;    /* 36px - sistema XXL */
  --text-3xl: 3rem;       /* 48px - sistema XXXL */
  /* Extended sizes for hero/display (site needs larger) */
  --text-4xl: 3.5rem;     /* 56px */
  --text-5xl: 4rem;       /* 64px */

  /* Font Weights - Alinhado com baseTokens.FONT.WEIGHT */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Line Heights - Alinhado com baseTokens.FONT.LINE_HEIGHT */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* ============================================================================
     SPACING - Alinhado com baseTokens.SPACING
     ============================================================================ */

  --space-1: 0.125rem;    /* 2px - sistema XXS */
  --space-2: 0.25rem;     /* 4px - sistema XS */
  --space-3: 0.5rem;      /* 8px - sistema SM */
  --space-4: 1rem;        /* 16px - sistema MD */
  --space-5: 1.5rem;      /* 24px - sistema LG */
  --space-6: 2rem;        /* 32px - sistema XL */
  --space-8: 3rem;        /* 48px - sistema XXL */
  --space-10: 4rem;       /* 64px - sistema XXXL */
  /* Extended spacing for sections */
  --space-12: 5rem;       /* 80px */
  --space-16: 6rem;       /* 96px */
  --space-20: 8rem;       /* 128px */
  --space-24: 10rem;      /* 160px */

  /* ============================================================================
     BORDER RADIUS - Alinhado com baseTokens.RADIUS
     ============================================================================ */

  --radius-sm: 0.25rem;   /* 4px - sistema SM */
  --radius-md: 0.5rem;    /* 8px - sistema MD */
  --radius-lg: 1rem;      /* 16px - sistema LG */
  --radius-xl: 1.5rem;    /* 24px - sistema XL */
  --radius-full: 9999px;

  /* ============================================================================
     BORDER WIDTH - Alinhado com baseTokens.BORDER_WIDTH
     ============================================================================ */

  --border-thin: 1px;
  --border-thick: 2px;

  /* ============================================================================
     SHADOWS - Alinhado com baseTokens.SHADOW
     ============================================================================ */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
  --shadow-glow-sm: 0 0 10px rgba(99, 102, 241, 0.2);
  --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.4);

  /* ============================================================================
     TRANSITIONS - Alinhado com baseTokens.TRANSITION
     ============================================================================ */

  /* Durations */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Easings - Alinhado com baseTokens.TRANSITION.EASING */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================================================
     INTERACTION - Alinhado com baseTokens.INTERACTION
     ============================================================================ */

  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.5);
  --disabled-opacity: 0.5;

  /* ============================================================================
     Z-INDEX - Alinhado com baseTokens.Z_INDEX
     ============================================================================ */

  --z-sticky: 1050;
  --z-modal: 1100;

  /* ============================================================================
     CONTAINER
     ============================================================================ */

  --container-max: 1200px;
  --container-padding: var(--space-5);
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   Alinhado com @frontend/src/styles/theme/default.ts (lightTheme)
   Ativado via data-theme="light" no <html>
   ============================================================================ */

:root[data-theme="light"] {
  /* Background Colors - Alinhado com lightTheme.COLORS.BACKGROUND */
  --color-bg-primary: #FFFFFF;
  --color-bg-primary-95: rgba(255, 255, 255, 0.95);
  --color-bg-secondary: #F3F4F6;
  --color-bg-tertiary: #E5E7EB;
  --color-bg-tertiary-85: rgba(229, 231, 235, 0.85);
  --color-bg-card: #FFFFFF;
  --color-bg-elevated: #F9FAFB;
  --color-bg-overlay: rgba(0, 0, 0, 0.4);

  /* Brand Colors - Alinhado com lightTheme.COLORS.BRAND (indigo — mais saturado no light) */
  --color-brand: #4F46E5;
  --color-brand-hover: #4338CA;
  --color-brand-accent: #818CF8;
  --color-brand-quaternary: #6366F1;
  --color-brand-light: rgba(79, 70, 229, 0.08);
  --color-brand-glow: rgba(79, 70, 229, 0.10);
  --color-brand-glow-strong: rgba(79, 70, 229, 0.20);
  --color-brand-glow-subtle: rgba(79, 70, 229, 0.03);

  /* Text Colors - Alinhado com lightTheme.COLORS.TEXT */
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6B7280;

  /* Feedback Colors - Light variants */
  --color-success: #10B981;
  --color-success-bg: #ECFDF5;
  --color-success-light: rgba(16, 185, 129, 0.08);
  --color-success-border-subtle: rgba(16, 185, 129, 0.15);
  --color-warning: #F59E0B;
  --color-warning-bg: #FFFBEB;
  --color-warning-light: rgba(245, 158, 11, 0.08);
  --color-warning-bg-light: rgba(245, 158, 11, 0.10);
  --color-warning-border-subtle: rgba(245, 158, 11, 0.20);
  --color-error: #EF4444;
  --color-error-bg: #FEF2F2;
  --color-info: #3B82F6;
  --color-info-bg-light: rgba(59, 130, 246, 0.08);
  --color-info-border-subtle: rgba(59, 130, 246, 0.20);

  /* Status Badge Colors - Alinhado com lightTheme.COLORS.STATUS (baseTokens) */
  --color-status-success-bg: #ECFDF5;
  --color-status-success-text: #047857;
  --color-status-success-border: #A7F3D0;

  --color-status-warning-bg: #FFFBEB;
  --color-status-warning-text: #B45309;
  --color-status-warning-border: #FDE68A;

  --color-status-error-bg: #FEF2F2;
  --color-status-error-text: #B91C1C;
  --color-status-error-border: #FECACA;

  /* Border Colors - Alinhado com lightTheme.COLORS.BORDER */
  --color-border: #D1D5DB;
  --color-border-subtle: #E5E7EB;

  /* Text on brand backgrounds — stays white in light theme too */
  --color-on-brand: #FFFFFF;

  /* Overlay shimmer — stays white-based for button shine effects on brand backgrounds */
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);

  /* Shadows - more subtle on light backgrounds */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-glow: 0 0 20px rgba(79, 70, 229, 0.15);
  --shadow-glow-sm: 0 0 10px rgba(79, 70, 229, 0.10);
  --shadow-glow-strong: 0 0 40px rgba(79, 70, 229, 0.20);

  /* Focus ring - brand-aligned */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.3);
}

/* Media Query Breakpoints Reference:
   - Mobile: < 768px
   - Tablet: 768px - 1023px
   - Desktop: >= 1024px
*/