/**
 * casino-matchmaker-tools — theme token bridge.
 *
 * Maps generic --cmm-* variables to the CasinoMatchmaker 2.0 theme's
 * --sk-color-* / --sk-font-* tokens from:
 *   resources/scss/theme/base/_colors.scss
 *   resources/scss/theme/base/_fonts.scss
 *   resources/scss/theme/base/_typo-size.scss
 *
 * Fallbacks keep tools usable if the plugin is activated on a theme that
 * does not publish these tokens. Tool stylesheets MUST consume --cmm-*
 * vars only — never hard-coded colours or fonts.
 */

.cmm-tool,
.cmm-tools-archive,
.cmm-tools-list {
	/* Surfaces */
	--cmm-bg:        var(--sk-color-white, #ffffff);
	--cmm-fg:        var(--sk-color-text, #1E1D1D);
	--cmm-muted:     var(--sk-color-bg-second, #f2f6fd);
	--cmm-subtle:    var(--sk-color-text-subtle, #8995a6);

	/* Brand accents — pink primary, green for success, inherited from theme */
	--cmm-accent:    var(--sk-color-pink, #DF0241);
	--cmm-accent-fg: var(--sk-color-white, #ffffff);
	--cmm-accent-hover: var(--sk-color-pink-dark, #BA0337);

	/* States */
	--cmm-success:   var(--sk-color-primary, #52C41A);
	--cmm-warning:   #9a6800;
	--cmm-danger:    var(--sk-color-pink-dark, #BA0337);

	/* Borders */
	--cmm-border:    rgba(30, 29, 29, 0.12);
	--cmm-border-strong: rgba(30, 29, 29, 0.24);

	/* Typography — Manrope (headings) / Inter (body) */
	--cmm-font-body: var(--sk-font-secondary, 'Inter', system-ui, sans-serif);
	--cmm-font-head: var(--sk-font-primary, 'Manrope', system-ui, sans-serif);
	--cmm-font-mono: ui-monospace, SFMono-Regular, Menlo, 'JetBrains Mono', monospace;

	/* Font sizes — echo theme scale */
	--cmm-text-base: var(--sk-text-base-size, 16px);
	--cmm-text-xs:   var(--sk-text-xs, 14px);
	--cmm-text-2xs:  var(--sk-text-2xs, 12px);
	--cmm-text-h2:   var(--sk-text-h2, 24px);
	--cmm-text-h3:   var(--sk-text-h3, 18px);
	--cmm-line-body: var(--sk-line-height-body, 1.5);

	/* Radii — echo theme's pill-heavy aesthetic */
	--cmm-radius-sm: 8px;
	--cmm-radius-md: 15px;
	--cmm-radius-lg: 24px;
	--cmm-radius-pill: 30px;

	/* Spacing */
	--cmm-space-1: 4px;
	--cmm-space-2: 8px;
	--cmm-space-3: 12px;
	--cmm-space-4: 16px;
	--cmm-space-5: 24px;
	--cmm-space-6: 32px;
	--cmm-space-7: 48px;

	/* Shadows — soft, matches theme's drop-shadow filter aesthetic */
	--cmm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--cmm-shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
	--cmm-shadow-lg: 1px 4px 12px rgba(0, 0, 0, 0.15);
}

.cmm-tool,
.cmm-tools-archive {
	color: var(--cmm-fg);
	font-family: var(--cmm-font-body);
	font-size: var(--cmm-text-base);
	line-height: var(--cmm-line-body);
}

/* Article-level layout */
.cmm-tool {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--cmm-space-6) var(--cmm-space-4) var(--cmm-space-7);
}

.cmm-tool__header {
	margin-bottom: var(--cmm-space-5);
}

.cmm-tool__title {
	font-family: var(--cmm-font-head);
	font-weight: 700;
	margin: 0 0 var(--cmm-space-3);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
}

.cmm-tool__excerpt {
	margin: 0;
	font-size: 1.1rem;
	color: var(--cmm-subtle);
	line-height: 1.5;
}

.cmm-tool__intro,
.cmm-tool__article {
	max-width: 800px;
	margin: 0 auto var(--cmm-space-6);
	line-height: 1.7;
}

.cmm-tool__intro p,
.cmm-tool__article p {
	margin: 0 0 var(--cmm-space-4);
}

.cmm-tool__intro h2,
.cmm-tool__article h2,
.cmm-tool__intro h3,
.cmm-tool__article h3 {
	font-family: var(--cmm-font-head);
	margin: var(--cmm-space-5) 0 var(--cmm-space-3);
}

.cmm-tool__intro a,
.cmm-tool__article a {
	color: var(--cmm-accent);
}

.cmm-tool__body {
	margin: var(--cmm-space-5) 0;
}

/* Subtle separator between the tool and the long-form article body. */
.cmm-tool__divider {
	max-width: 120px;
	margin: var(--cmm-space-6) auto var(--cmm-space-6);
	border: 0;
	border-top: 1px solid var(--cmm-border);
}

.cmm-tool__article {
	margin-top: var(--cmm-space-5);
	margin-bottom: 0;
}

.cmm-tool__missing {
	max-width: 640px;
	margin: 0 auto;
	padding: var(--cmm-space-4);
	text-align: center;
	border: 1px dashed var(--cmm-border);
	border-radius: var(--cmm-radius-md);
	color: var(--cmm-subtle);
}

.cmm-tools-archive__title {
	font-family: var(--cmm-font-head);
	font-weight: 600;
	margin: 0 0 var(--cmm-space-4);
}

.cmm-tools__breadcrumbs {
	margin-bottom: 24px;
	color: var(--cmm-fg);
}