/*
 * TheDesizn Tools — Frontend Global Styles
 * Version: 1.0.0
 *
 * Design tokens and base styles used across all tool pages.
 * No preprocessor required — plain CSS with custom properties.
 */

/* =========================================================
   1. CSS Custom Properties (Design Tokens)
   ========================================================= */

:root {
	--tdz-primary:       #6c63ff;
	--tdz-primary-dark:  #5550e8;
	--tdz-primary-light: #ede9ff;
	--tdz-secondary:     #ff6584;
	--tdz-success:       #22c55e;
	--tdz-warning:       #f59e0b;
	--tdz-danger:        #ef4444;
	--tdz-info:          #3b82f6;

	--tdz-text:          #1e293b;
	--tdz-text-muted:    #64748b;
	--tdz-text-light:    #94a3b8;

	--tdz-bg:            #ffffff;
	--tdz-bg-alt:        #f8fafc;
	--tdz-bg-dark:       #0f172a;

	--tdz-border:        #e2e8f0;
	--tdz-border-radius: 12px;
	--tdz-border-radius-sm: 8px;
	--tdz-border-radius-lg: 20px;

	--tdz-shadow-sm:     0 1px 3px rgba(0,0,0,0.08);
	--tdz-shadow:        0 4px 16px rgba(0,0,0,0.10);
	--tdz-shadow-lg:     0 12px 40px rgba(0,0,0,0.14);

	--tdz-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--tdz-font-mono:     'Fira Code', 'Cascadia Code', Consolas, monospace;

	--tdz-transition:    0.2s ease;
	--tdz-container-max: 1200px;
}

/* =========================================================
   2. Base Reset / Normalisation (scoped to .tdz-* elements)
   ========================================================= */

.tdz-wrap *,
.tdz-wrap *::before,
.tdz-wrap *::after {
	box-sizing: border-box;
}

.tdz-wrap {
	font-family: var(--tdz-font);
	color: var(--tdz-text);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =========================================================
   3. Utility Classes
   ========================================================= */

.tdz-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;
}

.tdz-text-center  { text-align: center; }
.tdz-text-muted   { color: var(--tdz-text-muted); }
.tdz-mt-0         { margin-top: 0; }
.tdz-mb-0         { margin-bottom: 0; }

/* =========================================================
   4. Badges
   ========================================================= */

.tdz-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	border-radius: 100px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.tdz-badge--free     { background: #dcfce7; color: #16a34a; }
.tdz-badge--pro      { background: #ede9ff; color: #6c63ff; }
.tdz-badge--business { background: #fef3c7; color: #b45309; }
.tdz-badge--success  { background: #dcfce7; color: #16a34a; }
.tdz-badge--danger   { background: #fee2e2; color: #dc2626; }
.tdz-badge--info     { background: #dbeafe; color: #1d4ed8; }

/* =========================================================
   5. Buttons
   ========================================================= */

.tdz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 24px;
	border: none;
	border-radius: var(--tdz-border-radius-sm);
	font-family: var(--tdz-font);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background var(--tdz-transition), transform var(--tdz-transition), box-shadow var(--tdz-transition);
	white-space: nowrap;
}

.tdz-btn:disabled,
.tdz-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

.tdz-btn--primary {
	background: var(--tdz-primary);
	color: #fff;
}
.tdz-btn--primary:hover { background: var(--tdz-primary-dark); }

.tdz-btn--outline {
	background: transparent;
	color: var(--tdz-primary);
	border: 2px solid var(--tdz-primary);
}
.tdz-btn--outline:hover {
	background: var(--tdz-primary);
	color: #fff;
}

.tdz-btn--ghost {
	background: var(--tdz-bg-alt);
	color: var(--tdz-text);
	border: 1px solid var(--tdz-border);
}
.tdz-btn--ghost:hover { background: var(--tdz-border); }

.tdz-btn--danger {
	background: var(--tdz-danger);
	color: #fff;
}

.tdz-btn--sm { padding: 6px 16px; font-size: 0.8125rem; }
.tdz-btn--lg { padding: 14px 32px; font-size: 1.0625rem; }

/* =========================================================
   6. Spinner
   ========================================================= */

.tdz-spinner {
	display: inline-block;
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: tdz-spin 0.7s linear infinite;
}

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

/* =========================================================
   7. Alerts / Notices
   ========================================================= */

.tdz-alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 18px;
	border-radius: var(--tdz-border-radius-sm);
	font-size: 0.9rem;
	margin: 16px 0;
}

.tdz-alert--success { background: #f0fdf4; border-left: 4px solid var(--tdz-success); color: #166534; }
.tdz-alert--error   { background: #fef2f2; border-left: 4px solid var(--tdz-danger);  color: #991b1b; }
.tdz-alert--warning { background: #fffbeb; border-left: 4px solid var(--tdz-warning); color: #92400e; }
.tdz-alert--info    { background: #eff6ff; border-left: 4px solid var(--tdz-info);    color: #1e40af; }

/* =========================================================
   8. Progress Bar
   ========================================================= */

.tdz-progress {
	width: 100%;
	height: 6px;
	background: var(--tdz-border);
	border-radius: 100px;
	overflow: hidden;
}

.tdz-progress__bar {
	height: 100%;
	background: var(--tdz-primary);
	border-radius: 100px;
	transition: width 0.3s ease;
}

/* =========================================================
   9. Tools Grid Discovery
   ========================================================= */

.tdz-tools-discovery {
	margin: 20px 0;
}

.tdz-tools-filter-bar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 30px;
}

.tdz-tools-search {
	position: relative;
	max-width: 400px;
}

.tdz-tools-search input {
	width: 100%;
	padding: 12px 16px 12px 42px;
	border: 1px solid var(--tdz-border);
	border-radius: var(--tdz-border-radius);
	font-size: 1rem;
	background: var(--tdz-bg);
}

.tdz-tools-search .dashicons {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tdz-text-muted);
}

.tdz-tools-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tdz-cat-btn {
	background: var(--tdz-bg-alt);
	border: 1px solid var(--tdz-border);
	padding: 6px 14px;
	border-radius: 100px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--tdz-text);
	transition: all var(--tdz-transition);
}

.tdz-cat-btn.active, .tdz-cat-btn:hover {
	background: var(--tdz-primary);
	color: #fff;
	border-color: var(--tdz-primary);
}

.tdz-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}

.tdz-no-tools {
	grid-column: 1 / -1;
	text-align: center;
	color: var(--tdz-text-muted);
	padding: 40px;
	background: var(--tdz-bg-alt);
	border-radius: var(--tdz-border-radius);
}

.tdz-tool-card {
	display: flex;
	flex-direction: column;
	background: var(--tdz-bg);
	border: 1px solid var(--tdz-border);
	border-radius: var(--tdz-border-radius);
	padding: 24px;
	text-decoration: none !important;
	color: inherit !important;
	transition: transform var(--tdz-transition), box-shadow var(--tdz-transition), border-color var(--tdz-transition);
}

.tdz-tool-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--tdz-shadow);
	border-color: var(--tdz-primary-light);
}

.tdz-tool-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
}

.tdz-tool-card__icon {
	width: 48px;
	height: 48px;
	background: var(--tdz-bg-alt);
	border-radius: var(--tdz-border-radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tdz-primary);
}

.tdz-tool-card__icon .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

.tdz-tool-card__badges {
	display: flex;
	gap: 6px;
}

.tdz-card-badge {
	font-size: 0.65rem;
	padding: 2px 8px;
	border-radius: 100px;
	font-weight: 700;
	text-transform: uppercase;
}

.tdz-card-badge--ai {
	background: #fce7f3;
	color: #be185d;
}

.tdz-tool-card__title {
	margin: 0 0 8px 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.3;
}

.tdz-tool-card__desc {
	margin: 0;
	font-size: 0.9rem;
	color: var(--tdz-text-muted);
	line-height: 1.5;
	flex-grow: 1;
}