/* ============================================================
   THEME: dark-dramatic-vivid
   Dark dramatic vivid
   Mood: dark-bold-saturated
   Used by: tetno, reflektor, lustro, pelnia, wernisaz
   Canonical archetype: reflektor
   Generated by tools/a2-build-themes.php
   ============================================================ */

.aibt-theme-dark-dramatic-vivid {
	--bg-main: #0F1014;
	/* Section bg alternation fix — widened from #1A1B22 (~4% lift) to #21222B (~7% lift) for better section delineation 2026-05-26 */
	--bg-section: #21222B;
	--bg-card: #25262E;
	--ink: #F4F4F6;
	--ink-soft: #C8C9CE;
	--ink-dim: #8A8B91;
	--ink-mute: #555560;
	--ink-inverse: #0F1014;
	--ink-inverse-soft: #25262E;
	/* Text color when placed ON the accent background (CTA buttons, bubbles,
	   badges). Distinct from --ink-inverse (inverse of body ink, = DARK here). */
	--on-accent: #FFFFFF;
	/* Light text for dark sections (footer, bg-dark) — same as body ink on dark. */
	--on-dark: #FFFFFF;
	--line: rgba(244, 244, 246, 0.08);
	--line-strong: rgba(244, 244, 246, 0.18);
	--accent: #C9A961;

	--font-display: 'Italiana', Georgia, serif;
	--font-body: 'Inter', system-ui, sans-serif;
	--font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

	--radius: 0px;
	--radius-card: 0px;
	--photo-filter: saturate(1.05) brightness(0.88) contrast(1.18);

	/* === Path B semantic tokens (Layer 2 API) — superset over legacy === */
	--background:           var(--bg-main);
	--background-alt:       var(--bg-section);
	--background-dark:      var(--bg-main);
	--background-card:      var(--bg-card);
	--text-primary:         var(--ink);
	--text-secondary:       var(--ink-soft);
	--text-muted:           var(--ink-dim);
	--text-on-photo:        var(--ink);
	--text-on-dark:         var(--on-dark);
	--accent-hover:         #B0904E;
	--accent-fade:          rgba(201, 169, 97, 0.12);
	--cta-bg-primary:       var(--accent);
	--cta-text-primary:     var(--bg-main);
	--cta-border-primary:   var(--accent);
	--cta-bg-secondary:     transparent;
	--cta-text-secondary:   var(--ink);
	--cta-border-secondary: var(--ink);
	--divider-primary:      var(--line);
	--divider-accent:       var(--line-strong);
	--decor-radius:         0px;
	--decor-radius-photo:   0px;
	--decor-shadow:         none;
	--decor-shadow-elevated:0 8px 30px rgba(0, 0, 0, 0.4);
	--decor-border-width:   1px;
	--italic-color:         var(--accent);
	--italic-weight:        500;
	/* Dark theme → HERO keeps dark-scrim default. Champagne accent is light, so the
	   conversion band uses dark text. */
	--hero-em-color:        var(--accent);
	--conversion-band-bg:   var(--accent);
	--conversion-band-text: var(--bg-main);

	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--ink);
	background: var(--bg-main);
	-webkit-font-smoothing: antialiased;
}

.aibt-theme-dark-dramatic-vivid h1,
.aibt-theme-dark-dramatic-vivid h2,
.aibt-theme-dark-dramatic-vivid h3,
.aibt-theme-dark-dramatic-vivid h4 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--ink);
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0;
}

.aibt-theme-dark-dramatic-vivid a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.22s ease;
}

.aibt-theme-dark-dramatic-vivid img {
	filter: var(--photo-filter);
}

/* End theme dark-dramatic-vivid. Individual archetype CSS files MAY override these
   defaults for marquee atoms (KOWADŁO blueprint, KLATKA EXIF, etc.). */