@charset "UTF-8";
/**
 * aa-design-system.css - AlternativeArt Design System
 * Location: /res/css/aa-design-system.css
 * 
 * ONE SOURCE OF TRUTH for visual design across all modules:
 * - Studio Module
 * - EPP Module (retrofit)
 * - Home page (future redesign)
 * 
 * Bootstrap 5.3.3 compatible - extends rather than overrides
 */

/* ================================================================
   SECTION 1: CSS VARIABLES
   Brand colors, role colors, dark mode
   ================================================================ */
:root {
	/* Brand Colors - Primary (Rose) */
	--aa-primary: #c05f77;
	--aa-primary-hover: #a94d64;
	--aa-primary-light: rgb(247, 200, 200);
	
	/* Brand Colors - Secondary (Slate) */
	--aa-secondary: #4d656df5;
	--aa-secondary-solid: #4d656d;
	--aa-secondary-hover: #3d5157;
	--aa-secondary-light: rgba(77, 101, 109, 0.15);
	
	/* Brand Colors - Neutrals */
	--aa-dark: #080810;
	--aa-light: #fffcfc;
	--aa-info: rgb(190, 186, 186);
	
	/* Role Colors */
	--aa-curator-color: #35aca5;
	--aa-artist-color: rgb(197, 105, 105);
	--aa-critic-color: #a767bb;
	--aa-collector-color: #6792bb;
	--aa-exhibition-color: #c9b37b;
	
	/* Dark Mode (Going Dark feature) */
	--aa-dark-mode: #1a1a2e;
	--aa-dark-accent: #2d2d44;
}

/* ================================================================
   SECTION 2: BRAND BUTTONS
   Primary, secondary, promote, dark mode, follow states
   ================================================================ */

/* Primary Button (Rose) */
.btn-aa-primary {
	background-color: var(--aa-primary);
	border-color: var(--aa-primary);
	color: #fff;
}
.btn-aa-primary:hover,
.btn-aa-primary:focus {
	background-color: var(--aa-primary-hover);
	border-color: var(--aa-primary-hover);
	color: #fff;
}
.btn-aa-primary:active {
	background-color: var(--aa-primary-hover);
	border-color: var(--aa-primary-hover);
}

/* Primary Outline Button */
.btn-outline-aa-primary {
	border-color: var(--aa-primary);
	color: var(--aa-primary);
	background-color: transparent;
}
.btn-outline-aa-primary:hover,
.btn-outline-aa-primary:focus {
	background-color: var(--aa-primary);
	border-color: var(--aa-primary);
	color: #fff;
}

/* Secondary Button (Slate) */
.btn-aa-secondary {
	background-color: var(--aa-secondary);
	border-color: var(--aa-secondary-solid);
	color: #fff;
}
.btn-aa-secondary:hover,
.btn-aa-secondary:focus {
	background-color: var(--aa-secondary-hover);
	border-color: var(--aa-secondary-hover);
	color: #fff;
}

/* Secondary Outline Button */
.btn-outline-aa-secondary {
	border-color: var(--aa-secondary-solid);
	color: var(--aa-secondary-solid);
	background-color: transparent;
}
.btn-outline-aa-secondary:hover,
.btn-outline-aa-secondary:focus {
	background-color: var(--aa-secondary);
	border-color: var(--aa-secondary-solid);
	color: #fff;
}

/* Promote Button (Gold - Exhibition/Gallery) */
.btn-promote {
	background-color: var(--aa-exhibition-color);
	border-color: var(--aa-exhibition-color);
	color: var(--aa-dark);
}
.btn-promote:hover,
.btn-promote:focus {
	background-color: #b8a36c;
	border-color: #b8a36c;
	color: var(--aa-dark);
}

/* Dark Mode Button (Going Dark feature) */
.btn-dark-mode {
	background-color: var(--aa-dark-mode);
	border-color: var(--aa-dark-mode);
	color: #fff;
}
.btn-dark-mode:hover,
.btn-dark-mode:focus {
	background-color: var(--aa-dark-accent);
	border-color: var(--aa-dark-accent);
	color: #fff;
}
.btn-outline-dark-mode {
	background: transparent;
	border-color: var(--aa-dark-mode);
	color: var(--aa-dark-mode);
}
.btn-outline-dark-mode:hover,
.btn-outline-dark-mode:focus {
	background-color: var(--aa-dark-mode);
	color: #fff;
}

/* Follow Button States (Subscriptions) */
.btn-follow {
	background-color: var(--aa-primary);
	border-color: var(--aa-primary);
	color: #fff;
}
.btn-follow:hover,
.btn-follow:focus {
	background-color: var(--aa-primary-hover);
	border-color: var(--aa-primary-hover);
	color: #fff;
}
.btn-following {
	background-color: #fff;
	border-color: var(--aa-primary);
	color: var(--aa-primary);
}
.btn-following:hover,
.btn-following:focus {
	background-color: var(--aa-primary-light);
	border-color: var(--aa-primary);
	color: var(--aa-primary);
}

/* ================================================================
   SECTION 3: TEXT AND BACKGROUND UTILITIES
   Brand-colored text, backgrounds, borders
   ================================================================ */

/* Text Colors */
.text-aa-primary { color: var(--aa-primary) !important; }
.text-aa-secondary { color: var(--aa-secondary-solid) !important; }
.text-aa-curator { color: var(--aa-curator-color) !important; }
.text-aa-artist { color: var(--aa-artist-color) !important; }
.text-aa-exhibition { color: var(--aa-exhibition-color) !important; }

/* Background Colors */
.bg-aa-primary { background-color: var(--aa-primary) !important; color: #fff; }
.bg-aa-primary-light { background-color: var(--aa-primary-light) !important; }
.bg-aa-secondary { background-color: var(--aa-secondary) !important; color: #fff; }
.bg-aa-secondary-light { background-color: var(--aa-secondary-light) !important; }
.bg-aa-exhibition { background-color: var(--aa-exhibition-color) !important; color: var(--aa-dark); }
.bg-aa-exhibition-light { background-color: rgba(201, 179, 123, 0.2) !important; }
.bg-aa-dark-mode { background-color: var(--aa-dark-mode) !important; color: #fff; }
.bg-aa-dark-accent { background-color: var(--aa-dark-accent) !important; color: #fff; }

/* Border Colors */
.border-aa-primary { border-color: var(--aa-primary) !important; }
.border-aa-secondary { border-color: var(--aa-secondary-solid) !important; }
.border-aa-exhibition { border-color: var(--aa-exhibition-color) !important; }
.border-aa-dark-mode { border-color: var(--aa-dark-mode) !important; }

/* ================================================================
   SECTION 4: ROLE BADGES
   Artist, curator, visitor, anonymous, admin, exhibition
   ================================================================ */
.badge-artist {
	background-color: var(--aa-artist-color) !important;
	color: #fff;
}
.badge-curator {
	background-color: var(--aa-curator-color) !important;
	color: #fff;
}
.badge-visitor {
	background-color: var(--aa-secondary) !important;
	color: #fff;
}
.badge-anonymous {
	background-color: #e9ecef !important;
	color: var(--aa-secondary-solid);
	border: 1px solid #dee2e6;
}
.badge-admin {
	background-color: #dc3545 !important;
	color: #fff;
}
.badge-exhibition,
.badge-gallery,
.badge-promoted {
	background-color: var(--aa-exhibition-color) !important;
	color: var(--aa-dark);
}
.going-dark-badge {
	background-color: var(--aa-dark) !important;
	color: #fff;
}

/* Comment hierarchy badges (Studio Module) */
.badge-lead-curator {
	background-color: var(--aa-curator-color) !important;
	color: #fff;
	font-weight: 600;
}
.badge-assoc-curator {
	background-color: rgba(53, 172, 165, 0.7) !important;
	color: #fff;
}
.badge-project-artist {
	background-color: var(--aa-artist-color) !important;
	color: #fff;
}
.badge-platform-curator {
	background: linear-gradient(135deg, var(--aa-curator-color) 0%, var(--aa-secondary-solid) 100%);
	color: #fff;
	opacity: 0.8;
}
.badge-platform-artist {
	background: linear-gradient(135deg, var(--aa-artist-color) 0%, var(--aa-secondary-solid) 100%);
	color: #fff;
	opacity: 0.8;
}

/* ================================================================
   SECTION 5: AVATAR PLACEHOLDER
   Circular avatar placeholders with role variants
   ================================================================ */
.avatar-placeholder {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #e9ecef;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--aa-secondary-solid);
	flex-shrink: 0;
}
.avatar-placeholder-sm,
.avatar-sm {
	width: 32px;
	height: 32px;
	font-size: 0.75rem;
}
.avatar-placeholder-lg,
.avatar-lg {
	width: 64px;
	height: 64px;
	font-size: 1.25rem;
}
.avatar-artist {
	background-color: var(--aa-primary-light);
	color: var(--aa-artist-color);
}
.avatar-curator {
	background-color: #d1f2f0;
	color: var(--aa-curator-color);
}
.avatar-anonymous {
	background-color: #e9ecef;
	color: var(--aa-secondary-solid);
}

/* ================================================================
   SECTION 6: LEGACY ROLE COLORS
   Backward compatibility with base-20250303.css classes
   Now reference CSS variables for consistency
   ================================================================ */
.curator-color { color: var(--aa-curator-color); }
.artist-color { color: var(--aa-artist-color); }
.critic-color { color: var(--aa-critic-color); }
.collector-color { color: var(--aa-collector-color); }
.exhibition-color { color: var(--aa-exhibition-color); }

/* ================================================================
   SECTION 7: COMMON UI PATTERNS
   Field hints, character counters, explainers
   ================================================================ */

/* Field hint text (form helper text) */
.field-hint {
	font-size: 0.875rem;
	color: var(--aa-secondary-solid);
	font-style: italic;
}

/* Character counter for textareas */
.char-counter {
	font-size: 0.75rem;
	color: var(--aa-secondary-solid);
}
.char-counter.warning { color: #ffc107; }
.char-counter.danger { color: #dc3545; }

/* Explainer alert (friendly guidance) */
.explainer-alert {
	background-color: var(--aa-secondary-light);
	border: 1px solid var(--aa-secondary-solid);
}

/* Primary explainer variant */
.explainer-alert-primary {
	background-color: var(--aa-primary-light);
	border: 1px solid var(--aa-primary);
}