/**
 * BuddyPress Polls - CSS Custom Properties
 *
 * Design tokens for consistent styling across the polls dashboard.
 * Compatible with BuddyX theme and supports dark mode.
 *
 * @package BuddyPress_Polls
 * @since 4.5.0
 */

:root {
	/* ========================================
	 * Color Palette
	 * ======================================== */

	/* Primary Colors - Integrated with Reign Theme */
	--polls-primary: var(--reign-colors-theme, #2271b1);
	--polls-primary-hover: var(--reign-site-link-hover-color, #1d5d97);
	--polls-primary-light: var(--reign-site-secondary-bg-color, #e8f3fc);
	--polls-primary-rgb: 34, 113, 177;

	/* Status Colors */
	--polls-success: #00a32a;
	--polls-success-light: #e6f7eb;
	--polls-warning: #dba617;
	--polls-warning-light: #fcf3d9;
	--polls-danger: #d63638;
	--polls-danger-light: #fcebeb;
	--polls-info: #72aee6;
	--polls-info-light: #e8f3fc;

	/* Neutral Colors */
	--polls-white: #ffffff;
	--polls-black: #1e1e1e;
	--polls-gray-50: #f9fafb;
	--polls-gray-100: #f6f7f7;
	--polls-gray-200: #e0e0e0;
	--polls-gray-300: #c3c4c7;
	--polls-gray-400: #a7aaad;
	--polls-gray-500: #8c8f94;
	--polls-gray-600: #757575;
	--polls-gray-700: #50575e;
	--polls-gray-800: #3c434a;
	--polls-gray-900: #1e1e1e;

	/* Semantic Colors - Reign Theme Integration */
	--polls-bg: var(--reign-site-body-bg-color, var(--polls-gray-100));
	--polls-bg-alt: var(--reign-site-secondary-bg-color, var(--polls-gray-50));
	--polls-card-bg: var(--reign-site-sections-bg-color, #ffffff);
	--polls-gray-50: var(--reign-site-sections-bg-color, var(--polls-gray-50));
	--polls-border: var(--reign-site-border-color, var(--polls-gray-200));
	--polls-border-focus: var(--reign-colors-theme, var(--polls-primary));
	--polls-text: var(--reign-site-headings-color, #1e1e1e);
	--polls-text-secondary: var(--reign-site-alternate-text-color, var(--polls-gray-700));
	--polls-text-muted: var(--reign-site-alternate-text-color);
	--polls-link: var(--reign-site-link-color, var(--polls-primary));
	--polls-link-hover: var(--reign-site-link-hover-color, var(--polls-primary-hover));

	/* ========================================
	 * Typography
	 * ======================================== */

	--polls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	--polls-font-size-xs: 11px;
	--polls-font-size-sm: 13px;
	--polls-font-size-md: 14px;
	--polls-font-size-base: 15px;
	--polls-font-size-lg: 16px;
	--polls-font-size-xl: 18px;
	--polls-font-size-2xl: 20px;
	--polls-font-size-3xl: 24px;

	--polls-font-weight-normal: 400;
	--polls-font-weight-medium: 500;
	--polls-font-weight-semibold: 600;
	--polls-font-weight-bold: 700;

	--polls-line-height-tight: 1.25;
	--polls-line-height-normal: 1.5;
	--polls-line-height-relaxed: 1.625;

	/* ========================================
	 * Spacing Scale
	 * ======================================== */

	--polls-space-0: 0;
	--polls-space-1: 4px;
	--polls-space-2: 8px;
	--polls-space-3: 12px;
	--polls-space-4: 16px;
	--polls-space-5: 20px;
	--polls-space-6: 24px;
	--polls-space-8: 32px;
	--polls-space-10: 40px;
	--polls-space-12: 48px;
	--polls-space-16: 64px;

	/* ========================================
	 * Layout
	 * ======================================== */

	--polls-container-max: 1200px;
	--polls-content-max: 900px;
	--polls-panel-width: 520px;
	--polls-card-min-width: 300px;
	--polls-grid-gap: var(--polls-space-4);

	/* ========================================
	 * Border & Radius
	 * ======================================== */

	--polls-radius-sm: 4px;
	--polls-radius-md: 6px;
	--polls-radius-lg: 8px;
	--polls-radius-xl: 12px;
	--polls-radius-full: 9999px;

	--polls-border-width: 1px;
	--polls-border-style: solid;

	/* ========================================
	 * Shadows
	 * ======================================== */

	--polls-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--polls-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
	--polls-shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--polls-shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--polls-shadow-panel: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--polls-shadow-focus: 0 0 0 2px var(--polls-primary-light);

	/* ========================================
	 * Transitions & Animation
	 * ======================================== */

	--polls-transition-fast: 150ms ease;
	--polls-transition-normal: 200ms ease;
	--polls-transition-slow: 300ms ease;
	--polls-transition-panel: 350ms cubic-bezier(0.16, 1, 0.3, 1);

	/* ========================================
	 * Z-Index Scale
	 * ======================================== */

	--polls-z-base: 1;
	--polls-z-dropdown: 100;
	--polls-z-sticky: 200;
	--polls-z-overlay: 900;
	--polls-z-panel: 1000;
	--polls-z-toast: 1100;

	/* ========================================
	 * Component-Specific
	 * ======================================== */

	/* Buttons */
	--polls-btn-height: 36px;
	--polls-btn-height-sm: 28px;
	--polls-btn-height-lg: 44px;
	--polls-btn-padding-x: var(--polls-space-4);
	--polls-btn-padding-x-sm: var(--polls-space-3);
	--polls-btn-padding-x-lg: var(--polls-space-6);

	/* Inputs */
	--polls-input-height: 40px;
	--polls-input-height-sm: 32px;
	--polls-input-padding-x: var(--polls-space-3);
	--polls-input-padding-y: var(--polls-space-2);

	/* Cards */
	--polls-card-padding: var(--polls-space-5);
	--polls-card-radius: var(--polls-radius-lg);
	--polls-card-border: var(--polls-border-width) var(--polls-border-style) var(--polls-border);
	--polls-card-shadow: var(--polls-shadow-md);
	--polls-card-shadow-hover: var(--polls-shadow-lg);

	/* Tabs */
	--polls-tab-height: 44px;
	--polls-tab-gap: var(--polls-space-1);
	--polls-tab-active-border: 2px;

	/* Status Badges */
	--polls-badge-padding: var(--polls-space-1) var(--polls-space-2);
	--polls-badge-radius: var(--polls-radius-sm);
	--polls-badge-font-size: var(--polls-font-size-xs);

	/* Touch Targets (WCAG 2.1 AA) */
	--polls-touch-target: 44px;
	--polls-touch-target-min: 24px;

	/* Answer Items */
	--polls-answer-height: 48px;
	--polls-answer-gap: var(--polls-space-2);
	--polls-drag-handle-width: 24px;

	/* ========================================
	 * Activity Polls Variables - Reign Theme Integration
	 * ======================================== */
	--bpolls-primary: var(--reign-colors-theme, #4caf50);
	--bpolls-primary-hover: var(--reign-site-link-hover-color, #45a049);
	--bpolls-secondary: var(--reign-site-headings-color, #333333);
	--bpolls-danger: var(--reign-color-error, #ef5455);
	--bpolls-warning: var(--reign-color-loading, #fc9700);
	--bpolls-success: var(--reign-color-success, #60c060);
	--bpolls-info: var(--reign-color-info, #4d90fd);

	/* Activity Polls Background Integration */
	--bpolls-bg-primary: var(--reign-site-sections-bg-color, #ffffff);
	--bpolls-bg-secondary: var(--reign-site-secondary-bg-color, #f5f5f5);
	--bpolls-bg-tertiary: var(--reign-site-body-bg-color, #efefef);

	/* Activity Polls Text Integration */
	--bpolls-text-primary: var(--reign-site-body-text-color, #333333);
	--bpolls-text-secondary: var(--reign-site-alternate-text-color, #666666);
	--bpolls-text-muted: var(--polls-gray-600, #999999);

	/* Activity Polls Border Integration */
	--bpolls-border-color: var(--reign-site-border-color, #dddddd);
	--bpolls-border-light: rgba(0, 0, 0, 0.1);
}

html.dark-mode,
body.dark-scheme {
	--polls-success-light: var(--reign-site-secondary-bg-color, #e6f7eb);
}

/* ========================================
 * Reduced Motion
 * ======================================== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--polls-transition-fast: 0ms;
		--polls-transition-normal: 0ms;
		--polls-transition-slow: 0ms;
		--polls-transition-panel: 0ms;
	}
}

/* ========================================
 * Accessibility Utilities
 * ======================================== */

/* Screen reader only - visually hidden but accessible */
.polls-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;
}

/* Skip link for keyboard navigation */
.polls-skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	z-index: 9999;
}

.polls-skip-link:focus {
	position: fixed;
	top: var(--polls-space-4);
	left: var(--polls-space-4);
	width: auto;
	height: auto;
	padding: var(--polls-space-3) var(--polls-space-4);
	background-color: var(--polls-primary);
	color: var(--polls-white);
	font-size: var(--polls-font-size-md);
	font-weight: var(--polls-font-weight-semibold);
	text-decoration: none;
	border-radius: var(--polls-radius-md);
	box-shadow: var(--polls-shadow-lg);
	outline: 2px solid var(--polls-white);
	outline-offset: 2px;
}

/* Focus visible base - keyboard-only focus indication */
.polls-focus-visible:focus:not(:focus-visible) {
	outline: none;
	box-shadow: none;
}

.polls-focus-visible:focus-visible {
	outline: 2px solid var(--polls-primary);
	outline-offset: 2px;
}

/* ========================================
 * High Contrast Mode Support
 * ======================================== */

@media (forced-colors: active) {
	.polls-btn,
	.polls-tab,
	.poll-card__action,
	.polls-form__input,
	.polls-form__select {
		border: 2px solid currentColor;
	}

	.polls-btn--primary {
		background-color: Highlight;
		color: HighlightText;
	}

	.poll-card__badge,
	.polls-status-badge {
		border: 1px solid currentColor;
	}
}