/* ============================================================
   THEME: butter-sunshine-bright
   Butter Sunshine Bright — warm butter-cream + sunny yellow
   Mood: light-sunny-optimistic-dopamine
   Path B theme (recipe palette). Butter yellow is a flagged 2026
   trend ("cheerful, optimistic, fashion-forward"), and gold/amber
   existed ONLY on dark themes — there was no bright LIGHT yellow.
   Warm butter-cream base, soft-butter alt sections, a deep ochre
   text-accent (AA-safe on cream) with a BRIGHT sunny-yellow CTA/band
   that carries dark text (so the energy pops without failing AA),
   friendly Plus Jakarta Sans. Reads bakery / food / kids / summer /
   creative / retail / events / optimistic DTC. All AA-checked.
   Added 2026-06-09 (user request: +4 trend themes, 18 -> 22).
   ============================================================ */

.aibt-theme-butter-sunshine-bright {
	--bg-main: #FFFDF4;       /* warm butter-cream */
	--bg-section: #FBF1CE;    /* soft butter yellow — ABAB alternation */
	--bg-card: #FFFFFF;
	--ink: #2A2614;           /* warm near-black (olive-brown) — ~14:1 on base */
	--ink-soft: #574E33;
	--ink-dim: #6E6240;       /* muted — AA on the butter alt-section (~5.2:1) */
	--ink-mute: #D8C98E;
	--ink-inverse: #FFFDF4;
	/* text on the ochre --accent FILL (badges, accent chips) — white clears AA
	   (~5.8:1). The bright-yellow CTA is a separate token pair (--cta-bg-primary
	   + --cta-text-primary dark), so its dark label is unaffected. */
	--on-accent: #FFFFFF;
	--on-dark: #FFFDF4;
	--line: rgba(42, 38, 20, 0.12);
	--line-strong: rgba(42, 38, 20, 0.22);

	--font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
	--font-body: 'DM Sans', system-ui, sans-serif;
	--font-mono: 'JetBrains Mono', 'SF Mono', monospace;

	--radius: 12px;           /* friendly, rounded */
	--radius-card: 14px;
	--photo-filter: saturate(1.06) brightness(1.02) contrast(1.01); /* bright, sunny */

	/* === Path B semantic tokens (Layer 2 variant API) — superset over legacy.
	   Bright yellow can't clear AA as small text on cream, so the SUNNINESS lives
	   in the butter backgrounds + the bright-yellow CTA/band (which carry DARK
	   text, ~9:1), while the text-accent (links/kickers/italic) is a deep ochre
	   #856000 that clears AA on the cream main (~5.4:1) AND on the deeper butter
	   section tint #FBF1CE (~5.0:1), plus white-on-accent fills (~5.8:1). === */
	--accent:               #856000;
	--background:           var(--bg-main);
	--background-alt:       var(--bg-section);
	--background-dark:      #26200F;   /* deep warm olive-black for dark bands + footer */
	--background-card:      var(--bg-card);
	--text-primary:         var(--ink);
	--text-secondary:       var(--ink-soft);
	--text-muted:           var(--ink-dim);
	--text-on-photo:        #2A2614;
	--text-on-dark:         var(--on-dark);
	--accent-hover:         #785600;
	--accent-fade:          rgba(133, 96, 0, 0.10);
	--cta-bg-primary:       #F4C518;   /* BRIGHT sunny yellow */
	--cta-text-primary:     #2A2614;   /* dark label on sunny yellow (~9:1) */
	--cta-border-primary:   #F4C518;
	--cta-bg-secondary:     transparent;
	--cta-text-secondary:   #785600;
	--cta-border-secondary: #856000;
	--divider-primary:      var(--line);
	--divider-accent:       rgba(133, 96, 0, 0.28);
	--decor-radius:         12px;
	--decor-radius-photo:   12px;
	--decor-shadow:         0 1px 3px rgba(42, 38, 20, 0.07);
	--decor-shadow-elevated:0 16px 44px rgba(143, 104, 0, 0.16);
	--decor-border-width:   1px;
	--italic-color:         var(--accent);
	--italic-weight:        600;

	/* === HERO text-on-photo: warm butter glass panel === */
	--hero-scrim:        linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(42,38,20,0.26) 100%);
	--hero-panel-bg:     rgba(255, 253, 244, 0.90);
	--hero-panel-blur:   blur(10px) saturate(1.1);
	--hero-panel-text:   var(--ink);
	--hero-panel-pad:    clamp(1.5rem, 3vw, 2.5rem);
	--hero-panel-max:    44ch;
	--hero-panel-radius: 12px;
	--hero-panel-border: 1px solid rgba(143, 104, 0, 0.18);
	--hero-panel-shadow: 0 14px 44px rgba(42, 38, 20, 0.14);
	--hero-text-shadow:  none;
	--hero-em-color:     var(--accent);

	/* === Conversion band: bright sunny yellow, dark text clears AA (~9:1) === */
	--conversion-band-bg:   #F4C518;
	--conversion-band-text: #2A2614;

	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-butter-sunshine-bright h1,
.aibt-theme-butter-sunshine-bright h2,
.aibt-theme-butter-sunshine-bright h3,
.aibt-theme-butter-sunshine-bright h4 {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -0.02em;
	line-height: 1.12;
	margin: 0;
}

.aibt-theme-butter-sunshine-bright a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.22s ease;
}

.aibt-theme-butter-sunshine-bright img {
	filter: var(--photo-filter);
}

/* End theme butter-sunshine-bright. */