/**
 * Theme CSS Variables
 *
 * Structure:
 * 1. SYSTEM SCALES (fixed) - radius, spacing, shadows, transitions
 * 2. LOCKED COLORS (fixed) - VIP gold, coins, CTAs, status, badges
 * 3. THEMEABLE: Spacing Base - padding/margin/gap base values
 * 4. THEMEABLE: Component Styles - radius, border per component
 * 5. THEMEABLE: Light Theme Colors
 * 6. THEMEABLE: Dark Theme Colors
 * 7. DENSITY MODIFIERS
 * 8. UTILITY CLASSES
 *
 * Theme Editor: Modify sections 3, 4, 5, 6
 */

/* ============================================
   1. SYSTEM SCALES (fixed, NOT themeable)
   Reference values - components reference these
   ============================================ */
:root {

	/* Icon Sizes */
	--icon-xs: 12px;
	--icon-sm: 16px;
	--icon-md: 20px;
	--icon-lg: 24px;
	--icon-xl: 28px;
	--icon-2xl: 32px;
	--icon-3xl: 48px;

	/* Radius Scale (components reference these) */
	--radius: 0.5rem;
	--radius-none: 0;
	--radius-2xs: 2px;
	--radius-xs: 0.25rem;
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;
	--radius-2xl: 1.25rem;
	--radius-3xl: 1.5rem;
	--radius-full: 9999px;

	/* Spacing Scale (density modifies these) */
	--space-px: 1px;
	--space-0\.5: 0.125rem;
	--space-1: 0.25rem;
	--space-1\.5: 0.375rem;
	--space-2: 0.5rem;
	--space-2\.5: 0.625rem;
	--space-3: 0.75rem;
	--space-3\.5: 0.875rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Overlays / Backdrops */
	--overlay-light: rgba(0, 0, 0, 0.5);
	--overlay-medium: rgba(0, 0, 0, 0.6);
	--overlay-dark: rgba(0, 0, 0, 0.7);
	--overlay-heavy: rgba(0, 0, 0, 0.8);
	--image-overlay: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.7));

	/* Box Shadows */
	--shadow-none: none;
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
	--shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.3);
	--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
	--shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);

	/* Text Shadows */
	--text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--text-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.5);
	--text-shadow-lg: 0 2px 4px rgba(0, 0, 0, 0.3);
	--text-shadow-glow: 0 0 4px rgba(229, 231, 235, 0.5);

	/* Transitions */
	--transition-fast: 100ms;
	--transition-normal: 200ms;
	--transition-slow: 300ms;
	--transition-colors: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
	--transition-opacity: opacity var(--transition-normal);
	--transition-transform: transform var(--transition-normal);
	--transition-all: all var(--transition-normal) ease;
	--transition-lift: transform 0.2s, box-shadow 0.2s;

	/* Typography Scale */
	--text-2xs: 0.625rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 2rem;
	--text-4xl: 2.5rem;
	--line-height-tight: 1.2;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;
	--font-condensed: 'Roboto Condensed', system-ui, sans-serif;
	--font-serif: Georgia, serif;

	/* Header (fixed dimensions) */
	--header-height: 70px;
	--header-blur: blur(10px);
}

/* ============================================
   2. LOCKED COLORS (fixed, NOT themeable)
   Brand consistency across all themes
   ============================================ */
:root {
	/* VIP/Premium - Gold */
	--vip-button-text: #000000;
	--vip-gold: #D4AF37;
	--vip-gold-dark: #B8952A;
	--vip-gold-light: #E8D48B;
	--bg-fancy-gold: radial-gradient(ellipse at 62% 52%, rgba(230,180,35,0.65) 0%, transparent 48%), radial-gradient(ellipse at 28% 72%, rgba(165,125,18,0.5) 0%, transparent 42%), radial-gradient(ellipse at 82% 18%, rgba(250,205,40,0.32) 0%, transparent 36%), radial-gradient(ellipse at 48% 8%, rgba(195,152,25,0.32) 0%, transparent 30%), radial-gradient(ellipse at 12% 38%, rgba(130,98,12,0.28) 0%, transparent 28%), radial-gradient(ellipse at 75% 85%, rgba(110,82,10,0.2) 0%, transparent 25%), linear-gradient(160deg, #221200 0%, #381c00 35%, #201000 65%, #140900 100%);
  	--bg-fancy-gold-dark: radial-gradient(ellipse at 65% 55%, rgba(150,110,15,0.55) 0%, transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(95,70,8,0.4) 0%, transparent 45%), radial-gradient(ellipse at 80% 20%, rgba(180,145,20,0.2) 0%, transparent 40%), linear-gradient(160deg, #120900 0%, #1e1100 35%, #120700 65%, #0a0400 100%);

	--vip-box-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(184, 149, 42, 0.25) 100%);
	--vip-box-bg-dark: linear-gradient(135deg, rgba(212, 175, 55, 0.2) 0%, rgba(184, 149, 42, 0.35) 100%);

	/* Coins - Gold */
	--coin-gold: #FFD700;
	--coin-gold-dark: #d97706;
	--coin-text: #8B6914;
	--coin-text-light: #ffcc80;
	--coin-accent: #5d4037;
	--coin-bg: rgba(255, 215, 0, 0.1);
	--coin-bg-dark: rgba(255, 215, 0, 0.15);

	/* Member Badges */
	--member-verified-bg: #3b82f6;
	--member-verified-text: #ffffff;
	--member-not-verified-bg: #9ca3af;
	--member-not-verified-text: #ffffff;
	--member-vip-bg: #D4AF37;
	--member-vip-text: #ffffff;
	--member-free-bg: #6b7280;
	--member-free-text: #ffffff;
	--member-new-bg: #8b5cf6;
	--member-new-text: #ffffff;
	--member-fresh-bg: #14b8a6;
	--member-active-bg: #3b82f6;
	--member-established-bg: #f59e0b;
	--member-veteran-bg: #a16207;

	/* CTA Boxes */
	--cta-verify: #3b82f6;
	--cta-verify-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.08) 100%);
	--cta-verify-border: rgba(59, 130, 246, 0.3);
	--cta-freemsg: #10b981;
	--cta-freemsg-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
	--cta-freemsg-border: rgba(16, 185, 129, 0.3);
	--cta-upgrade: #f59e0b;
	--cta-upgrade-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.08) 100%);
	--cta-upgrade-border: rgba(245, 158, 11, 0.3);
	--cta-coins: #d4af37;
	--cta-coins-bg: linear-gradient(135deg, rgba(212, 175, 55, 0.15) 0%, rgba(212, 175, 55, 0.08) 100%);
	--cta-coins-border: rgba(212, 175, 55, 0.3);

	/* Status Colors */
	--success: #16a34a;
	--error: #dc2626;
	--warning: #f59e0b;
	--info: #3b82f6;
	--success-bg: linear-gradient(135deg, #15803d, #22c55e);
	--warning-bg: linear-gradient(135deg, #f59e0b, #fbbf24);
	--error-bg: linear-gradient(135deg, #dc2626, #ef4444);
	--error-bg-subtle: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, transparent 100%);
	--error-bg-subtle-active: linear-gradient(135deg, rgba(239, 68, 68, 0.8) 0%, transparent 100%);
	--error-border-subtle: rgba(239, 68, 68, 0.3);
	--error-border-subtle-active: rgba(239, 68, 68, 0.4);
	--success-light: #86efac;
	--success-dark: #166534;
	--info-rgb: 59, 130, 246;
	--warning-rgb: 245, 158, 11;
	--online-dot: linear-gradient(135deg, #22c55e,#15803d);

	/* Subtle backgrounds for alerts/status (flat) */
	--error-bg-subtle-flat: rgba(239, 68, 68, 0.1);
	--success-bg-subtle-flat: rgba(34, 197, 94, 0.1);
	--warning-bg-subtle-flat: rgba(245, 158, 11, 0.1);
	--info-bg-subtle-flat: rgba(59, 130, 246, 0.1);

	/* Toast Backgrounds */
	--toast-bg-success: rgba(34, 197, 94, 0.95);
	--toast-bg-error: rgba(239, 68, 68, 0.95);
	--toast-bg-warning: rgba(245, 158, 11, 0.95);
	--toast-bg-info: rgba(59, 130, 246, 0.95);

	/* Profile Action Buttons - Pass (red), Like (green), Message (gray) */
	--profile-pass-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.4) 0%, rgba(239, 68, 68, 0.15) 100%);
	--profile-pass-border: rgba(239, 68, 68, 0.4);
	--profile-pass-text: #ef4444;
	--profile-like-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.4) 0%, rgba(34, 197, 94, 0.15) 100%);
	--profile-like-border: rgba(34, 197, 94, 0.4);
	--profile-like-text: #22c55e;
	--profile-message-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.25) 0%, rgba(148, 163, 184, 0.1) 100%);
	--profile-message-border: rgba(148, 163, 184, 0.3);
	--profile-message-text: var(--foregroundy);
}

/* ============================================
   3. THEMEABLE: Typography & Spacing
   Font weights, spacing base values
   ============================================ */
:root {
	/* Font Weights (semantic - by purpose) */
	--weight-heading: 400;
	--weight-title: 600;
	--weight-label: 500;
	--weight-text: 400;
	--weight-link: 500;
	--weight-button: 600;

	/* Spacing Base */
	--padding-base: 1rem;
	--margin-base: 1rem;
	--gap-base: 1rem;
	--line-height-density: 1.5;
	--text-size-density: 1rem;
}

/* ============================================
   4. THEMEABLE: Component Styles
   Radius and border per component
   ============================================ */
:root {
	/* Avatar (photo circle - usually stays round) */
	--avatar-radius: var(--radius-full);
	--avatar-border-width: 3px;
	--avatar-border-style: solid;
	--avatar-border-color: var(--background-color);

	/* Profile Card */
	--profile-radius: var(--radius-lg);
	--profile-border-width: 1px;
	--profile-border-style: solid;
	--profile-border-color: transparent;
	--profile-columns: 4;
	--landing-profiles-columns: 3;

	/* Card (generic) */
	--card-radius: var(--radius-lg);
	--card-border-width: 1px;
	--card-border-style: solid;
	--card-border-color: var(--border);

	/* Button */
	--button-radius: var(--radius-md);
	--button-border-width: 0;
	--button-border-style: solid;
	--button-border-color: transparent;

	/* Input */
	--input-radius: var(--radius-md);
	--input-border-width: 1px;
	--input-border-style: solid;
	--input-border-color: var(--border);

	/* Popup/Modal */
	--popup-radius: var(--radius-xl);
	--popup-border-width: 1px;
	--popup-border-style: solid;
	--popup-border-color: var(--border);

	/* Pill/Tab */
	--pill-radius: var(--radius-full);
	--pill-border-width: 1px;
	--pill-border-style: solid;
	--pill-border-color: var(--border);

	/* Message Bubble */
	--message-bubble-radius: var(--radius-lg);
	--message-bubble-border-width: 1px;
	--message-bubble-border-style: solid;

	/* Tooltip */
	--tooltip-radius: var(--radius-md);
	--tooltip-border-width: 0;
	--tooltip-border-style: solid;
	--tooltip-border-color: transparent;

	/* Component Shadows (set to none to disable) */
	--card-shadow: var(--shadow-sm);
	--popup-shadow: var(--shadow-modal);
	--button-shadow: var(--shadow-none);
	--avatar-shadow: var(--shadow-none);
	--tooltip-shadow: var(--shadow-md);
	--profile-shadow: var(--shadow-md);

	/* Text Shadows (set to none to disable) */
	--heading-text-shadow: var(--shadow-none);
	--overlay-text-shadow: var(--text-shadow-md);

	--heading-color: var(--foreground);
	--title-color: var(--foreground);

	--button-padding: var(--space-2) var(--space-4);
}

/* ============================================
   5. THEMEABLE: Light Theme Colors
   ============================================ */
:root {
	--bg-fancy-gray: radial-gradient(ellipse at 60% 50%, rgba(180,185,200,0.55) 0%, transparent 55%), radial-gradient(ellipse at 25% 75%, rgba(150,158,175,0.4) 0%, transparent 45%), radial-gradient(ellipse at 85% 20%, rgba(210,215,225,0.35) 0%, transparent 40%), linear-gradient(155deg, #d8dae0 0%, #eaecf0 35%, #dfe1e8 65%, #f2f3f6 100%);
	--bg-fancy-brown: radial-gradient(ellipse at 65% 60%, rgba(240,140,60,0.45) 0%, transparent 50%), radial-gradient(ellipse at 30% 75%, rgba(220,100,40,0.3) 0%, transparent 42%), radial-gradient(ellipse at 75% 15%, rgba(255,180,80,0.35) 0%, transparent 38%), linear-gradient(160deg, #fff3e6 0%, #fde8cc 35%, #fff0e0 65%, #fff8f0 100%);
	--bg-fancy-blue: radial-gradient(ellipse at 60% 55%, rgba(100,190,230,0.5) 0%, transparent 55%), radial-gradient(ellipse at 30% 72%, rgba(60,160,210,0.35) 0%, transparent 45%), radial-gradient(ellipse at 82% 18%, rgba(150,220,245,0.4) 0%, transparent 40%), linear-gradient(160deg, #ddf3fc 0%, #c2eaf8 35%, #d8f2fb 65%, #eef9fe 100%);
	--bg-fancy-green: radial-gradient(ellipse at 62% 58%, rgba(120,190,100,0.45) 0%, transparent 52%), radial-gradient(ellipse at 28% 72%, rgba(80,160,70,0.3) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(160,210,130,0.35) 0%, transparent 38%), linear-gradient(158deg, #edf8e6 0%, #daf2ce 35%, #e8f7e0 65%, #f4fbf0 100%);
	--bg-fancy-purple: radial-gradient(ellipse at 65% 55%, rgba(190,140,230,0.5) 0%, transparent 52%), radial-gradient(ellipse at 28% 70%, rgba(160,100,210,0.35) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(220,180,245,0.4) 0%, transparent 38%), linear-gradient(160deg, #f2eafc 0%, #e8d8fa 35%, #f0e8fc 65%, #f8f3fe 100%);
	--bg-fancy-red: radial-gradient(ellipse at 62% 55%, rgba(240,160,170,0.5) 0%, transparent 52%), radial-gradient(ellipse at 28% 72%, rgba(220,120,140,0.35) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(255,195,205,0.4) 0%, transparent 38%), linear-gradient(160deg, #fceef0 0%, #fae0e4 35%, #fceef1 65%, #fef6f7 100%);

	/* Brand */
	--primary: #9f3c12;
	--primary-light: #bc6c49;
	--secondary: #fdcca4;
	--accent: #ecd6ce;

	/* Base */
	--background: var(--bg-fancy-gray);
	--background-color: #ffffff;
	--foreground: #171717;
	--foreground-color: #171717;
	--muted: #737373;
	--muted-background: rgba(0, 0, 0, 0.08);
	--border: #e5e5e5;
	--surface: #f9fafb;

	/* Selection */
	--selection-bg: rgba(159, 18, 57, 0.2);
	--selection-text: inherit;

	/* Border States */
	--border-focus: #9f3c12;

	/* Button */
	--button-bg: #9f1239;
	--button-text: #ffffff;

	/* Input */
	--input-bg: #ffffff;
	--input-border: #e5e5e5;
	--input-text: #171717;
	--input-focus-bg:rgba(0, 0, 0, 0.1);
	--input-focus-border: var(--primary);
	--input-focus-text: #000000;

	/* Popup/Modal */
	--overlay: rgba(0, 0, 0, 0.6);
	--popup-header-bg: rgba(0, 0, 0, 0.25);
	--popup-footer-bg: rgba(0, 0, 0, 0.15);
	--popup-bg: var(--background);
	--popup-text: #171717;
	--popup-text-muted: #737373;
	--popup-button-primary-bg: #9f3c12;
	--popup-button-primary-text: #ffffff;
	--popup-button-secondary-bg: #f5f5f5;
	--popup-button-secondary-text: #171717;
	--popup-input-bg: #ffffff;
	--popup-input-border: #e5e5e5;
	--popup-input-text: #171717;

	/* Card */
	--card-bg: #f5f5f5;
	--card-stats-bg: #f0f0f0;
	--card-photos-bg: #ffffff;

	/* Profile Card */
	--profile-bg: var(--card-bg);
	--profile-border-color: #e5e5e5;

	/* Header/Footer */
	--header-bg: rgba(245, 158, 11, 0.5);
	--menu-bg: rgba(245, 158, 11, 0.3);
	--footer-bg: #f9fafb;
	--background-rgb: 255, 255, 255;
	--navBackground: var(--background);

	/* Pills/Nav */
	--pill-bg: rgba(255, 255, 255, 1);
	--pill-active-bg: #9f3c12;
	--pill-active-text: #ffffff;

	/* Tooltip */
	--tooltip-bg: #171717;
	--tooltip-text: #ffffff;

	/* Message Bubbles */
	--message-bubble-own-bg: #a0a0a0;
	--message-bubble-own-text: #ffffff;
	--message-bubble-own-border-color: transparent;
	--message-bubble-other-bg: #ffffff;
	--message-bubble-other-text: #171717;
	--message-bubble-other-border-color: #e5e5e5;

	/* RGB Values (for rgba usage) */
	--primary-rgb: 159, 60, 18;
	--foreground-rgb: 23, 23, 23;

	/* Typography (themeable) */
	--font-title: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-subtitle: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-text: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-title-size: 1.5rem;
	--font-subtitle-size: 1.4rem;
	--font-text-size: 1rem;
	--font-title-line-height: 1.2;
	--font-subtitle-line-height: 1.3;
	--font-text-line-height: 1.6;
}

/* ============================================
   6. THEMEABLE: Dark Theme Colors
   ============================================ */
.dark {
	--bg-fancy-gray: radial-gradient(ellipse at 60% 50%, rgba(80,90,110,0.5) 0%, transparent 55%), radial-gradient(ellipse at 25% 75%, rgba(50,60,80,0.4) 0%, transparent 45%), radial-gradient(ellipse at 85% 20%, rgba(100,110,130,0.2) 0%, transparent 40%), linear-gradient(155deg, #08090c 0%, #111419 35%, #0a0c10 65%, #060709 100%);
	--bg-fancy-brown: radial-gradient(ellipse at 65% 55%, rgba(160,80,20,0.55) 0%, transparent 55%), radial-gradient(ellipse at 30% 70%, rgba(100,40,10,0.4) 0%, transparent 45%), radial-gradient(ellipse at 80% 20%, rgba(200,120,30,0.2) 0%, transparent 40%), linear-gradient(160deg, #1a0800 0%, #2d1200 35%, #180700 65%, #0e0400 100%);
	--bg-fancy-blue: radial-gradient(ellipse at 60% 55%, rgba(0,80,130,0.55) 0%, transparent 55%), radial-gradient(ellipse at 30% 72%, rgba(0,50,100,0.4) 0%, transparent 45%), radial-gradient(ellipse at 82% 18%, rgba(0,110,160,0.25) 0%, transparent 40%), linear-gradient(160deg, #00040d 0%, #000c1a 35%, #000610 65%, #000308 100%);
	--bg-fancy-green: radial-gradient(ellipse at 62% 58%, rgba(20,90,40,0.55) 0%, transparent 52%), radial-gradient(ellipse at 28% 72%, rgba(10,60,20,0.45) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(40,110,30,0.2) 0%, transparent 38%), linear-gradient(158deg, #010801 0%, #030f04 35%, #020a02 65%, #010501 100%);
	--bg-fancy-purple: radial-gradient(ellipse at 65% 55%, rgba(110,20,160,0.55) 0%, transparent 52%), radial-gradient(ellipse at 28% 70%, rgba(70,10,110,0.45) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(150,40,190,0.2) 0%, transparent 38%), linear-gradient(160deg, #060008 0%, #0f0118 35%, #080012 65%, #040008 100%);
	--bg-fancy-red: radial-gradient(ellipse at 62% 55%, rgba(150,20,50,0.55) 0%, transparent 52%), radial-gradient(ellipse at 28% 72%, rgba(100,10,30,0.45) 0%, transparent 44%), radial-gradient(ellipse at 80% 18%, rgba(190,30,70,0.2) 0%, transparent 38%), linear-gradient(160deg, #0a0003 0%, #180006 35%, #0d0004 65%, #070002 100%);

	/* VIP box - rich gold in dark mode */
	--vip-box-bg: var(--bg-fancy-gold);

	/* Brand */
	--primary: #f39a67;
	--primary-light: #f4a98c;
	--secondary: #9f2e12;
	--accent: rgba(48, 66, 79, 0.5);

	/* Base */
	--background: var(--bg-fancy-gray);
	--background-color: #0a0c10;
	--foreground: #E0E0E0;
	--foreground-color: #E0E0E0;
	--muted: #9CA3AF;
	--muted-background: rgba(255, 255, 255, 0.08);
	--border: #4B5563;
	--surface: #2a2f33;

	/* Selection */
	--selection-bg: rgba(114, 196, 244, 0.3);

	/* Border States */
	--border-focus: #f39a67;

	/* Button */
	--button-bg: #9f1239;
	--button-text: #ffffff;

	/* Input */
	--input-bg: rgba(0, 0, 0, 0.25);
	--input-border: rgba(255, 255, 255, 0.15);
	--input-text: #E0E0E0;
	--input-focus-bg:rgba(0, 0, 0, 0.35);
	--input-focus-border: var(--primary);
	--input-focus-text: #FFFFFF;

	/* Popup/Modal */
	--overlay: rgba(0, 0, 0, 0.75);
	--popup-header-bg: rgba(0, 0, 0, 0.25);
	--popup-footer-bg: transparent;
	--popup-bg:var(--background);
	--popup-text: #E0E0E0;
	--popup-text-muted: #9CA3AF;
	--popup-button-primary-bg: #9f2e12;
	--popup-button-primary-text: #ffffff;
	--popup-button-secondary-bg: #f39a67;
	--popup-button-secondary-text: #;
	--popup-input-bg: #383E42;
	--popup-input-border: #4B5563;
	--popup-input-text: #E0E0E0;

	/* Card */
	--card-bg: rgba(24, 30, 34, 0.8);
	--card-stats-bg: rgba(24, 30, 34, 0.3);
	--card-photos-bg: rgba(24, 30, 34, 0.1);

	/* Profile Card */
	--profile-bg: var(--card-bg);
	--profile-border-color: #4B5563;

	/* Header/Footer */
	--header-bg: rgba(0, 0, 0, 0.25);
	--menu-bg: rgba(0, 0, 0, 0.15);
	--footer-bg: rgba(0, 0, 0, 0.25);
	--background-rgb: 56, 62, 66;
	--navBackground: #282E32;

	/* Pills/Nav */
	--pill-bg: rgba(24, 30, 34, 0.5);
	--pill-active-bg: #FFFFFF;
	--pill-active-text: #171717;

	/* Tooltip */
	--tooltip-bg: #171717;
	--tooltip-text: #E0E0E0;

	/* Message Bubbles */
	--message-bubble-own-bg: #282E32;
	--message-bubble-own-text: #ffffff;
	--message-bubble-own-border-color: #4B5563;
	--message-bubble-other-bg: #253745;
	--message-bubble-other-text: #E0E0E0;
	--message-bubble-other-border-color: #5d7495;

	/* RGB Values (for rgba usage) */
	--primary-rgb: 243, 154, 103;
	--foreground-rgb: 224, 224, 224;

	/* Avatar (might need different border in dark) */
	--avatar-border-color: var(--surface);

	--heading-color: var(--foreground);
	--title-color: var(--foreground);
}

/* ============================================
   7. DENSITY MODIFIERS
   ============================================ */
.density-tight {
	--padding-base: 0.5rem;
	--margin-base: 0.5rem;
	--gap-base: 0.5rem;
	--space-px: 1px;
	--space-0\.5: 0.0625rem;
	--space-1: 0.125rem;
	--space-1\.5: 0.25rem;
	--space-2: 0.375rem;
	--space-2\.5: 0.5rem;
	--space-3: 0.5rem;
	--space-3\.5: 0.625rem;
	--space-4: 0.75rem;
	--space-5: 1rem;
	--space-6: 1.25rem;
	--space-8: 1.5rem;
	--space-10: 2rem;
	--space-12: 2.5rem;
	--space-16: 3.5rem;
	--space-20: 4rem;
	--space-24: 5rem;
	--line-height-density: 1.4;
	--text-size-density: 0.875rem;
}

.density-loose {
	--padding-base: 1.5rem;
	--margin-base: 1.5rem;
	--gap-base: 1.5rem;
	--space-px: 1px;
	--space-0\.5: 0.1875rem;
	--space-1: 0.375rem;
	--space-1\.5: 0.5rem;
	--space-2: 0.625rem;
	--space-2\.5: 0.75rem;
	--space-3: 1rem;
	--space-3\.5: 1.125rem;
	--space-4: 1.25rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-8: 2.5rem;
	--space-10: 3rem;
	--space-12: 4rem;
	--space-16: 5rem;
	--space-20: 6rem;
	--space-24: 7.5rem;
	--line-height-density: 1.6;
	--text-size-density: 1.125rem;
}

/* ============================================
   8. UTILITY CLASSES (keep minimal — prefer scoped CSS)
   ============================================ */

/* Layout */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }

/* Padding */
.p-2 { padding: var(--space-2); }

/* Borders */
.border { border: 1px solid var(--border); }

/* Text */
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-xl { font-size: var(--text-xl); }
.font-semibold { font-weight: 600; }

/* Visibility */
.hidden { display: none; }
.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;
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }