/* ============================================
   RUMMY ONLINE - DESIGN SYSTEM
   CSS Custom Properties for theming & consistency
   ============================================ */

:root {
   /* ==========================================
     COLOR PALETTE - LIGHT THEME (Neobrutalist)
     ========================================== */

   /* Background Colors - Cream/Beige */
   --bg-primary: #e8e4dc;
   --bg-secondary: #ddd9d1;
   --bg-tertiary: #d2cec6;
   --bg-card: #ffffff;

   /* Text Colors */
   --text-primary: #1a1a1a;
   --text-secondary: #4a4a4a;
   --text-muted: #7a7a7a;
   --text-inverse: #ffffff;

   /* Accent Colors */
   --accent-primary: #ff4081;
   /* Hot pink - Deal button, CTAs */
   --accent-primary-hover: #ff1a6c;
   --accent-primary-active: #e6005c;

   --accent-secondary: #c5e600;
   /* Lime green - Selected states */
   --accent-secondary-hover: #b8d900;
   --accent-secondary-dark: #9bbf00;

   --accent-tertiary: #1a1a1a;
   /* Black - Avatar borders, outlines */

   /* Card Colors */
   --card-red: #e91e63;
   --card-black: #1a1a1a;
   --card-back: #1a1a1a;
   --card-back-pattern: #2a2a2a;

   /* Status Colors */
   --status-success: #4caf50;
   --status-warning: #ff9800;
   --status-error: #f44336;
   --status-info: #2196f3;

   /* Ad Slot Colors */
   --ad-bg: #c5e600;
   --ad-text: #1a1a1a;
   --ad-border: #1a1a1a;

   /* Neobrutalist specific */
   --border-brutal: #1a1a1a;
   --card-border: #1a1a1a;
   --shadow-brutal-offset: 4px;


   /* ==========================================
     SHADOWS & EFFECTS - Neobrutalist
     ========================================== */

   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
   --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

   /* Brutalist offset shadows */
   --shadow-brutal: 4px 4px 0 0 #1a1a1a;
   --shadow-brutal-sm: 2px 2px 0 0 #1a1a1a;
   --shadow-brutal-lg: 6px 6px 0 0 #1a1a1a;

   --shadow-card: 3px 3px 0 0 #1a1a1a;
   --shadow-card-hover: 5px 5px 0 0 #1a1a1a;
   --shadow-card-selected: 4px 4px 0 0 var(--accent-primary);

   --shadow-avatar: 0 4px 12px rgba(0, 0, 0, 0.2);
   --shadow-button: 4px 4px 0 0 #1a1a1a;
   --shadow-button-hover: 2px 2px 0 0 #1a1a1a;

   /* Glow Effects */
   --glow-primary: 0 0 20px rgba(255, 64, 129, 0.4);
   --glow-secondary: 0 0 20px rgba(197, 230, 0, 0.4);
   --glow-card: 0 0 30px rgba(255, 255, 255, 0.3);

   /* ==========================================
     SPACING SCALE
     ========================================== */

   --space-2xs: 2px;
   --space-xs: 4px;
   --space-sm: 8px;
   --space-md: 16px;
   --space-lg: 24px;
   --space-xl: 32px;
   --space-2xl: 48px;
   --space-3xl: 64px;
   --space-4xl: 96px;

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

   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
   --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Font Sizes - Mobile first (16px base for readability) */
   --font-size-xs: 12px;
   --font-size-sm: 14px;
   --font-size-base: 16px;
   --font-size-md: 18px;
   --font-size-lg: 20px;
   --font-size-xl: 24px;
   --font-size-2xl: 32px;
   --font-size-3xl: 40px;
   --font-size-4xl: 48px;

   /* Font Weights */
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-black: 900;

   /* Line Heights */
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* Letter Spacing */
   --letter-spacing-tight: -0.02em;
   --letter-spacing-normal: 0;
   --letter-spacing-wide: 0.02em;
   --letter-spacing-wider: 0.05em;

   /* ==========================================
     BORDERS & RADII
     ========================================== */

   --border-width: 1px;
   --border-width-thick: 3px;
   --border-width-avatar: 4px;

   --border-color: rgba(0, 0, 0, 0.1);
   --border-color-strong: rgba(0, 0, 0, 0.2);

   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;
   --radius-2xl: 24px;
   --radius-full: 9999px;

   /* Card specific */
   --radius-card: 8px;

   /* ==========================================
     SIZING
     ========================================== */

   /* Touch Targets - Minimum 44px for accessibility */
   --touch-target-min: 44px;
   --touch-target-comfortable: 48px;

   /* Card Dimensions */
   --card-width: 70px;
   --card-height: 100px;
   --card-width-sm: 50px;
   --card-height-sm: 72px;
   --card-width-lg: 90px;
   --card-height-lg: 128px;

   /* Avatar Dimensions */
   --avatar-size: 64px;
   --avatar-size-sm: 48px;
   --avatar-size-lg: 80px;

   /* ==========================================
     TRANSITIONS & ANIMATIONS
     ========================================== */

   --transition-fast: 150ms ease;
   --transition-normal: 250ms ease;
   --transition-slow: 400ms ease;
   --transition-slower: 600ms ease;

   /* Specific transitions */
   --transition-transform: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-shadow: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
   --transition-opacity: opacity 200ms ease;
   --transition-colors: background-color 200ms ease, color 200ms ease, border-color 200ms ease;

   /* Animation Easings */
   --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

   /* Animation Durations */
   --duration-instant: 100ms;
   --duration-fast: 200ms;
   --duration-normal: 300ms;
   --duration-slow: 500ms;
   --duration-slower: 800ms;
   --duration-deal: 600ms;

   /* ==========================================
     Z-INDEX SCALE
     ========================================== */

   --z-base: 0;
   --z-cards: 10;
   --z-card-hover: 20;
   --z-card-dragging: 30;
   --z-ui: 40;
   --z-speech-bubble: 50;
   --z-modal: 100;
   --z-ad: 90;
   --z-header: 80;
   --z-tooltip: 110;

   /* ==========================================
     LAYOUT
     ========================================== */

   --header-height: 60px;
   --header-height-mobile: 50px;
   --ad-header-height: 50px;
   --ad-header-height-desktop: 90px;

   --max-width-game: 800px;
   --max-width-content: 1200px;

   /* Game Table */
   --table-padding: var(--space-lg);
   --table-min-height: 500px;
}

/* ==========================================
   DARK THEME
   ========================================== */

[data-theme="dark"] {
   /* Background Colors - Charcoal */
   --bg-primary: #3d3d3d;
   --bg-secondary: #333333;
   --bg-tertiary: #2a2a2a;
   --bg-card: #4a4a4a;

   /* Playing card face background - stays white */
   --card-face-bg: #ffffff;

   /* Text Colors */
   --text-primary: #f5f5f5;
   --text-secondary: #c0c0c0;
   --text-muted: #909090;
   --text-inverse: #1a1a1a;

   /* Adjusted Accents for Dark Mode - keep borders/buttons white */
   --accent-tertiary: #f5f5f5;
   --border-brutal: #f5f5f5;

   /* Card borders stay dark in dark mode */
   --card-border: #1a1a1a;

   /* Button shadows - white offset for dark mode */
   --shadow-brutal: 4px 4px 0 0 #f5f5f5;
   --shadow-brutal-sm: 2px 2px 0 0 #f5f5f5;
   --shadow-brutal-lg: 6px 6px 0 0 #f5f5f5;
   --shadow-button: 4px 4px 0 0 #f5f5f5;
   --shadow-button-hover: 2px 2px 0 0 #f5f5f5;

   /* Card shadows - dark offset for dark mode */
   --shadow-card: 3px 3px 0 0 #1a1a1a;
   --shadow-card-hover: 5px 5px 0 0 #1a1a1a;

   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
   --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.35);
   --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.45);

   --shadow-avatar: 0 4px 12px rgba(0, 0, 0, 0.4);

   /* Borders */
   --border-color: rgba(255, 255, 255, 0.15);
   --border-color-strong: rgba(255, 255, 255, 0.25);

   /* Ad Slot - White border for dark mode */
   --ad-bg: #4a4a4a;
   --ad-text: #f5f5f5;
   --ad-border: #f5f5f5;
}

/* ==========================================
   REDUCED MOTION
   ========================================== */

@media (prefers-reduced-motion: reduce) {
   :root {
      --transition-fast: 0ms;
      --transition-normal: 0ms;
      --transition-slow: 0ms;
      --transition-slower: 0ms;
      --duration-instant: 0ms;
      --duration-fast: 0ms;
      --duration-normal: 0ms;
      --duration-slow: 0ms;
      --duration-slower: 0ms;
      --duration-deal: 0ms;
   }
}

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

/* Text utilities */
.text-primary {
   color: var(--text-primary);
}

.text-secondary {
   color: var(--text-secondary);
}

.text-muted {
   color: var(--text-muted);
}

.text-accent {
   color: var(--accent-primary);
}

/* Background utilities */
.bg-primary {
   background-color: var(--bg-primary);
}

.bg-secondary {
   background-color: var(--bg-secondary);
}

.bg-accent {
   background-color: var(--accent-primary);
}

/* Font weight utilities */
.font-normal {
   font-weight: var(--font-weight-normal);
}

.font-medium {
   font-weight: var(--font-weight-medium);
}

.font-semibold {
   font-weight: var(--font-weight-semibold);
}

.font-bold {
   font-weight: var(--font-weight-bold);
}

.font-black {
   font-weight: var(--font-weight-black);
}

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

/* Focus visible */
.focus-visible:focus-visible {
   outline: 2px solid var(--accent-primary);
   outline-offset: 2px;
}