/**
 * Styleguide Page Styles
 *
 * @package DigiWebFX
 */

.styleguide-header {
	padding: var(--space-16) 0 var(--space-8) 0;
	border-bottom: var(--border-dark);
	margin-bottom: var(--space-12);
}

.styleguide-section {
	margin-bottom: var(--space-16);
}

.styleguide-title {
	font-size: var(--fs-2xl);
	margin-bottom: var(--space-4);
	color: var(--white);
}

.styleguide-desc {
	font-size: var(--fs-md);
	color: var(--slate-300);
	max-width: var(--reading-col);
	margin-bottom: var(--space-8);
}

/* Palette Swatches */
.swatch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--space-4);
}

.swatch-card {
	border-radius: var(--radius-md);
	overflow: hidden;
	background-color: var(--navy-800);
	border: var(--border-dark);
}

.swatch-color {
	height: 90px;
	width: 100%;
}

.swatch-navy-950 { background-color: var(--navy-950); }
.swatch-navy-900 { background-color: var(--navy-900); }
.swatch-navy-800 { background-color: var(--navy-800); }
.swatch-navy-700 { background-color: var(--navy-700); }
.swatch-gold-400 { background-color: var(--gold-400); }
.swatch-gold-500 { background-color: var(--gold-500); }
.swatch-gold-700 { background-color: var(--gold-700); }
.swatch-ivory-50 { background-color: var(--ivory-50); }
.swatch-white { background-color: var(--white); }
.swatch-slate-300 { background-color: var(--slate-300); }
.swatch-slate-400 { background-color: var(--slate-400); }
.swatch-slate-600 { background-color: var(--slate-600); }
.swatch-success { background-color: var(--success); }
.swatch-danger { background-color: var(--danger); }
.swatch-gold-gradient { background: var(--gold-gradient); }

.swatch-info {
	padding: var(--space-3);
}

.swatch-name {
	font-size: var(--fs-xs);
	font-weight: 600;
	font-family: var(--font-accent);
	color: var(--white);
	margin-bottom: var(--space-1);
}

.swatch-hex {
	font-size: var(--fs-xs);
	font-family: var(--font-mono);
	color: var(--slate-400);
}

/* Contrast Table */
.contrast-table-wrapper {
	overflow-x: auto;
	margin-top: var(--space-6);
}

.contrast-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--navy-800);
	border: var(--border-dark);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.contrast-table th,
.contrast-table td {
	padding: var(--space-4) var(--space-6);
	text-align: left;
	border-bottom: var(--border-dark);
	font-size: var(--fs-sm);
}

.contrast-table th {
	background-color: var(--navy-850, #0E203C);
	color: var(--white);
	font-family: var(--font-accent);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.badge-pass {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background-color: rgba(31, 138, 91, 0.2);
	color: #6EE7B7;
	border: 1px solid var(--success);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.badge-fail {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background-color: rgba(192, 57, 43, 0.2);
	color: #FCA5A5;
	border: 1px solid var(--danger);
	border-radius: var(--radius-full);
	font-size: var(--fs-xs);
	font-weight: 600;
}

/* Typography Scale Items */
.type-sample-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

.type-sample-item {
	padding: var(--space-6);
	background-color: var(--navy-800);
	border: var(--border-dark);
	border-radius: var(--radius-md);
}

.type-meta {
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	color: var(--gold-400);
	margin-bottom: var(--space-2);
}

.sample-3xl { font-size: var(--fs-3xl); line-height: 1.05; }
.sample-2xl { font-size: var(--fs-2xl); line-height: 1.1; }
.sample-xl  { font-size: var(--fs-xl); line-height: 1.2; }
.sample-lg  { font-size: var(--fs-lg); line-height: 1.25; }
.sample-md  { font-size: var(--fs-md); line-height: 1.4; }
.sample-base { font-size: var(--fs-base); line-height: 1.65; }
.sample-sm  { font-size: var(--fs-sm); line-height: 1.5; }
.sample-xs  { font-size: var(--fs-xs); line-height: 1.4; }

/* Buttons Demo */
.btn-demo-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}