/**
 * Whelloglot Design Tokens & CSS Variables
 *
 * This file defines all colors, spacing, typography, and other design values
 * used throughout the Whelloglot plugin UI.
 */

:root {
	/* Brand Colors */
	--whlg-primary: #364BFE;
	--whlg-primary-dark: #2635cc;
	--whlg-primary-light: #EAF2FF;
	--whlg-secondary: #20A7FB;
	--whlg-secondary-light: #e6f4ff;

	/* Status Colors */
	--whlg-success: #10b981;
	--whlg-success-light: #d1fae5;
	--whlg-danger: #ef4444;
	--whlg-danger-light: #fee2e2;
	--whlg-warning: #f59e0b;
	--whlg-warning-light: #fef3c7;
	--whlg-info: #3b82f6;

	/* Neutral Colors */
	--whlg-text-primary: #0a0a0a;
	--whlg-text-secondary: #404040;
	--whlg-text-tertiary: #555555;
	--whlg-text-muted: #cccccc;
	--whlg-bg-primary: #ffffff;
	--whlg-bg-secondary: #f5f5f5;
	--whlg-bg-tertiary: #efefef;
	--whlg-border: #e5e5e5;
	--whlg-border-light: #f0f0f0;

	/* Spacing Scale */
	--whlg-space-xs: 4px;
	--whlg-space-sm: 8px;
	--whlg-space-md: 12px;
	--whlg-space-lg: 16px;
	--whlg-space-xl: 24px;
	--whlg-space-2xl: 32px;
	--whlg-space-3xl: 48px;

	/* Border Radius */
	--whlg-radius-sm: 4px;
	--whlg-radius-md: 6px;
	--whlg-radius-lg: 8px;
	--whlg-radius-full: 9999px;

	/* Shadows */
	--whlg-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--whlg-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--whlg-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--whlg-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* Typography */
	--whlg-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--whlg-font-size-xs: 12px;
	--whlg-font-size-sm: 13px;
	--whlg-font-size-base: 14px;
	--whlg-font-size-md: 15px;
	--whlg-font-size-lg: 16px;
	--whlg-font-size-xl: 18px;
	--whlg-font-size-2xl: 20px;
	--whlg-font-size-3xl: 24px;

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

	/* Line Height */
	--whlg-line-height-tight: 1.25;
	--whlg-line-height-normal: 1.5;
	--whlg-line-height-relaxed: 1.75;

	/* Transitions */
	--whlg-transition-fast: 150ms ease-in-out;
	--whlg-transition-base: 200ms ease-in-out;
	--whlg-transition-slow: 300ms ease-in-out;

	/* Z-Index Scale */
	--whlg-z-dropdown: 10;
	--whlg-z-modal-overlay: 100;
	--whlg-z-modal: 101;
	--whlg-z-tooltip: 1000;
}

/* Ensure plugin styles work in dark mode (when WordPress adds support) */
@media (prefers-color-scheme: dark) {
	:root {
		--whlg-text-primary: #364BFE;
		--whlg-text-secondary: #20A7FB;
		--whlg-text-tertiary: #7BBDE8;
		--whlg-bg-primary: #1a1a1a;
		--whlg-bg-secondary: #2d2d2d;
		--whlg-bg-tertiary: #3d3d3d;
		--whlg-border: #404040;
		--whlg-border-light: #2d2d2d;
	}
}

/**
 * Base Reset & Styling for Whelloglot Components
 */

.whlg-plugin {
	font-family: var(--whlg-font-family);
	color: var(--whlg-text-primary);
	line-height: var(--whlg-line-height-normal);
	box-sizing: border-box;
}

.whlg-plugin *,
.whlg-plugin *::before,
.whlg-plugin *::after {
	box-sizing: border-box;
}

/* Ensure inputs inherit proper styling */
.whlg-plugin input,
.whlg-plugin select,
.whlg-plugin textarea,
.whlg-plugin button {
	font-family: inherit;
	font-size: inherit;
}

/**
 * Common Component Utilities
 */

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

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

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

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

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

.whlg-border {
	border-color: var(--whlg-border);
}

/**
 * Button Styles
 */

.whlg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--whlg-space-sm);
	padding: var(--whlg-space-md) var(--whlg-space-lg);
	font-size: var(--whlg-font-size-sm);
	font-weight: var(--whlg-font-weight-medium);
	border: 1px solid transparent;
	border-radius: var(--whlg-radius-md);
	cursor: pointer;
	transition: all var(--whlg-transition-base);
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	line-height: 1;
}

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

.whlg-btn-primary {
	background-color: var(--whlg-primary);
	color: #ffffff;
	border-color: var(--whlg-primary);
}

.whlg-btn-primary:hover {
	background-color: var(--whlg-primary-dark);
	border-color: var(--whlg-primary-dark);
	box-shadow: var(--whlg-shadow-md);
}

.whlg-btn-primary:active {
	transform: scale(0.98);
}

.whlg-btn-secondary {
	background-color: var(--whlg-secondary);
	color: #ffffff;
	border-color: var(--whlg-secondary);
}

.whlg-btn-secondary:hover {
	opacity: 0.9;
	box-shadow: var(--whlg-shadow-md);
}

.whlg-btn-danger {
	background-color: transparent;
	color: var(--whlg-danger);
	border-color: var(--whlg-danger);
}

.whlg-btn-danger:hover {
	background-color: var(--whlg-danger-light);
	border-color: var(--whlg-danger);
}

.whlg-btn-sm {
	padding: var(--whlg-space-sm) var(--whlg-space-md);
	font-size: var(--whlg-font-size-xs);
}

.whlg-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/**
 * Badge Styles
 */

.whlg-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--whlg-space-xs);
	padding: var(--whlg-space-xs) var(--whlg-space-sm);
	font-size: var(--whlg-font-size-xs);
	font-weight: var(--whlg-font-weight-medium);
	border-radius: var(--whlg-radius-full);
	white-space: nowrap;
}

.whlg-badge-primary {
	background-color: var(--whlg-primary-light);
	color: var(--whlg-primary);
	border: 1px solid var(--whlg-primary);
}

.whlg-badge-success {
	background-color: var(--whlg-success-light);
	color: var(--whlg-success);
	border: 1px solid var(--whlg-success);
}

.whlg-badge-outline {
	background-color: transparent;
	color: var(--whlg-text-secondary);
	border: 1px solid var(--whlg-border);
}

/**
 * Card Styles
 */

.whlg-card {
	background-color: var(--whlg-bg-primary);
	border: 1px solid var(--whlg-border);
	border-radius: var(--whlg-radius-lg);
	padding: var(--whlg-space-lg);
	box-shadow: var(--whlg-shadow-sm);
	transition: all var(--whlg-transition-base);
}

.whlg-card:hover {
	box-shadow: var(--whlg-shadow-md);
}

.whlg-card-active {
	background-color: var(--whlg-primary-light);
	border-color: var(--whlg-primary);
}

/**
 * Input Styles
 */

.whlg-input,
.whlg-select {
	padding: var(--whlg-space-md) var(--whlg-space-lg);
	font-size: var(--whlg-font-size-sm);
	border: 1px solid var(--whlg-border);
	border-radius: var(--whlg-radius-md);
	background-color: var(--whlg-bg-primary);
	color: var(--whlg-text-primary);
	transition: all var(--whlg-transition-base);
}

.whlg-input:focus,
.whlg-select:focus {
	outline: none;
	border-color: var(--whlg-primary);
	box-shadow: 0 0 0 3px var(--whlg-primary-light);
}

/**
 * Tooltip
 */

.whlg-tooltip {
	position: relative;
	display: inline-block;
}

.whlg-tooltip-text {
	visibility: hidden;
	background-color: var(--whlg-text-primary);
	color: #ffffff;
	text-align: center;
	padding: var(--whlg-space-sm) var(--whlg-space-md);
	border-radius: var(--whlg-radius-sm);
	font-size: var(--whlg-font-size-xs);
	position: absolute;
	z-index: var(--whlg-z-tooltip);
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	opacity: 0;
	transition: opacity var(--whlg-transition-fast);
}

.whlg-tooltip-text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 4px solid transparent;
	border-top-color: var(--whlg-text-primary);
}

.whlg-tooltip:hover .whlg-tooltip-text {
	visibility: visible;
	opacity: 1;
}

/**
 * Loading & Disabled States
 */

.whlg-loading {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--whlg-border);
	border-top-color: var(--whlg-primary);
	border-radius: 50%;
	animation: whlg-spin 0.8s linear infinite;
}

@keyframes whlg-spin {
	to {
		transform: rotate(360deg);
	}
}

/**
 * Admin-specific Styles (integrate with WordPress admin)
 */

.whlg-admin-notice {
	padding: var(--whlg-space-lg);
	margin-bottom: var(--whlg-space-lg);
	border-left: 4px solid var(--whlg-primary);
	background-color: var(--whlg-primary-light);
	border-radius: var(--whlg-radius-md);
}

.whlg-admin-notice-title {
	font-weight: var(--whlg-font-weight-semibold);
	margin-bottom: var(--whlg-space-sm);
}

.whlg-admin-notice-text {
	color: var(--whlg-text-secondary);
	margin-bottom: var(--whlg-space-md);
}