/* yap@me — honey hour theme tokens
   Editorial coral palette, light + dark variants */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Bebas+Neue&family=Pixelify+Sans:wght@400..700&display=swap');

:root,
.theme-light {
  /* honey hour — light */
  --bg: #FFF1E6;
  --bg-warm: #FFE3CE;
  --surface: #FFFFFF;
  --surface-2: #FFF7EF;
  --surface-sunken: #F4E2D3;
  --ink: #1A0E07;
  --ink-2: #3A201A;
  --ink-mute: #7A5848;
  --ink-faint: #A38573;
  --line: rgba(26, 14, 7, 0.10);
  --line-strong: rgba(26, 14, 7, 0.22);

  --coral: #FF5747;
  --coral-deep: #D8311F;
  --coral-soft: #FFD2C8;
  --coral-tint: #FFE9E2;
  --honey: #FFB347;
  --honey-soft: #FFE0AE;
  --butter: #FFEBA8;
  --rose: #FFC0B0;
  --plum: #4A1A14;
  --moss: #6B7A3F;
  --sky: #B8D4E8;

  --shadow-sm: 0 1px 2px rgba(74, 26, 20, 0.06);
  --shadow-md: 0 6px 22px -8px rgba(74, 26, 20, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(74, 26, 20, 0.28);
  --shadow-coral: 0 18px 48px -16px rgba(216, 49, 31, 0.42);

  /* hero bg — stays dark in both themes (used by streak hero, dark CTAs) */
  --hero-bg: #1A0E07;
  --hero-fg: #FFE9D9;
  --hero-fg-mute: rgba(255, 233, 217, 0.7);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

.theme-dark {
  /* honey hour — after dark */
  --bg: #150A05;
  --bg-warm: #221107;
  --surface: #25130C;
  --surface-2: #321A11;
  --surface-sunken: #1B0D07;
  --ink: #FFE9D9;
  --ink-2: #FFD9C2;
  --ink-mute: #C9A294;
  --ink-faint: #8A6B5C;
  --line: rgba(255, 233, 217, 0.10);
  --line-strong: rgba(255, 233, 217, 0.22);

  --coral: #FF6A55;
  --coral-deep: #FF4530;
  --coral-soft: #4A1A14;
  --coral-tint: #2E1410;
  --honey: #FFC974;
  --honey-soft: #4A331A;
  --butter: #5C4820;
  --rose: #FF8D78;
  --plum: #FFC0B0;
  --moss: #B4C275;
  --sky: #6B8FA3;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 28px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7);
  --shadow-coral: 0 18px 48px -16px rgba(255, 87, 71, 0.4);

  /* hero bg — same dark in both themes; in dark mode it picks up a subtle warmer tint */
  --hero-bg: #0E0703;
  --hero-fg: #FFE9D9;
  --hero-fg-mute: rgba(255, 233, 217, 0.65);
}

/* ─── COQUETTE (lvl 3 unlock) ───────────────────────────── */
.theme-coquette {
  --bg: #FFE3E8;
  --bg-warm: #FFCBD7;
  --surface: #FFFFFF;
  --surface-2: #FFF0F4;
  --surface-sunken: #F8C9D5;
  --ink: #5C1F30;
  --ink-2: #7C2F46;
  --ink-mute: #A86075;
  --ink-faint: #C798A4;
  --line: rgba(92, 31, 48, 0.10);
  --line-strong: rgba(92, 31, 48, 0.22);
  --coral: #E84B6F;
  --coral-deep: #B8264B;
  --coral-soft: #FFC1D2;
  --coral-tint: #FFD9E2;
  --honey: #F2BFD0;
  --honey-soft: #FFE0E8;
  --butter: #FFF0D8;
  --rose: #FF9BB5;
  --plum: #5C1F30;
  --moss: #8A6480;
  --sky: #C5B0D9;
  --shadow-sm: 0 1px 2px rgba(92, 31, 48, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(92, 31, 48, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(92, 31, 48, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(184, 38, 75, 0.42);
  --hero-bg: #2B0E17;
  --hero-fg: #FFE3E8;
  --hero-fg-mute: rgba(255, 227, 232, 0.65);
}

/* ─── CHROME (lvl 9 unlock) ───────────────────────────────── */
.theme-chrome {
  --bg: #D9D9DC;
  --bg-warm: #C2C2C8;
  --surface: #FFFFFF;
  --surface-2: #ECECEF;
  --surface-sunken: #B6B6BD;
  --ink: #1F1F22;
  --ink-2: #36363B;
  --ink-mute: #6B6B73;
  --ink-faint: #9A9AA1;
  --line: rgba(31, 31, 34, 0.12);
  --line-strong: rgba(31, 31, 34, 0.28);
  --coral: #1F1F22;
  --coral-deep: #000000;
  --coral-soft: #C9C9CF;
  --coral-tint: #E8E8EB;
  --honey: #FFB347;
  --honey-soft: #FFE0AE;
  --butter: #F0F0F2;
  --rose: #B8B8C0;
  --plum: #1F1F22;
  --moss: #8E8EA1;
  --sky: #D6D6DC;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.10);
  --shadow-md: 0 6px 22px -8px rgba(0,0,0,0.22);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.30);
  --shadow-coral: 0 18px 48px -16px rgba(0,0,0,0.40);
  --hero-bg: #0A0A0C;
  --hero-fg: #ECECEF;
  --hero-fg-mute: rgba(236, 236, 239, 0.65);
}

/* ─── COQUETTE DARK (lvl 3 dark variant) ──────────────────── */
.theme-coquette-dark {
  --bg: #1F0612;
  --bg-warm: #2D0E1E;
  --surface: #2E102A;
  --surface-2: #3A1A33;
  --surface-sunken: #100308;
  --ink: #FFE3E8;
  --ink-2: #FFCBD7;
  --ink-mute: #C798A4;
  --ink-faint: #A86075;
  --line: rgba(255, 227, 232, 0.10);
  --line-strong: rgba(255, 227, 232, 0.22);
  --coral: #FF7095;
  --coral-deep: #FFA8C0;
  --coral-soft: #5C1F30;
  --coral-tint: #2D0E1E;
  --honey: #FFC1D2;
  --honey-soft: #4A2030;
  --butter: #5C2840;
  --rose: #FFB5C5;
  --plum: #FFE3E8;
  --moss: #C8A8B5;
  --sky: #C5B0D9;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-coral: 0 18px 48px -16px rgba(255, 112, 149, 0.42);
  --hero-bg: #15030B;
  --hero-fg: #FFE3E8;
  --hero-fg-mute: rgba(255, 227, 232, 0.65);
}

/* ─── CHROME DARK (lvl 9 dark variant — graphite & ice) ───── */
.theme-chrome-dark {
  --bg: #0A0A0C;
  --bg-warm: #15151A;
  --surface: #1F1F25;
  --surface-2: #2A2A30;
  --surface-sunken: #050506;
  --ink: #ECECEF;
  --ink-2: #D5D5DA;
  --ink-mute: #8E8E96;
  --ink-faint: #5C5C66;
  --line: rgba(236, 236, 239, 0.10);
  --line-strong: rgba(236, 236, 239, 0.22);
  --coral: #ECECEF;
  --coral-deep: #FFFFFF;
  --coral-soft: #2A2A30;
  --coral-tint: #1F1F25;
  --honey: #FFC974;
  --honey-soft: #4A381B;
  --butter: #ECECEF;
  --rose: #8E8E96;
  --plum: #ECECEF;
  --moss: #B8B8C0;
  --sky: #5C5C66;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(0, 0, 0, 0.6);
  --hero-bg: #000000;
  --hero-fg: #ECECEF;
  --hero-fg-mute: rgba(236, 236, 239, 0.65);
}

/* ─── MATCHA (sage + oat-milk — "iced matcha latte" wellness) ── */
.theme-matcha {
  --bg: #EEF2E4;
  --bg-warm: #DCE7CC;
  --surface: #FFFFFF;
  --surface-2: #F4F8EB;
  --surface-sunken: #C9D9B0;
  --ink: #1F2A14;
  --ink-2: #344225;
  --ink-mute: #6E7E54;
  --ink-faint: #9DA882;
  --line: rgba(31, 42, 20, 0.10);
  --line-strong: rgba(31, 42, 20, 0.22);
  --coral: #6B9347;
  --coral-deep: #4A6B2E;
  --coral-soft: #D0DEB8;
  --coral-tint: #E5ECCF;
  --honey: #C8DC7E;
  --honey-soft: #E5EFB6;
  --butter: #F5F0C8;
  --rose: #B5C7A0;
  --plum: #2A3D1B;
  --moss: #7FA354;
  --sky: #A8C5B8;
  --shadow-sm: 0 1px 2px rgba(31, 42, 20, 0.06);
  --shadow-md: 0 6px 22px -8px rgba(31, 42, 20, 0.20);
  --shadow-lg: 0 24px 60px -20px rgba(31, 42, 20, 0.28);
  --shadow-coral: 0 18px 48px -16px rgba(74, 107, 46, 0.40);
  --hero-bg: #142010;
  --hero-fg: #EEF2E4;
  --hero-fg-mute: rgba(238, 242, 228, 0.65);
}

.theme-matcha-dark {
  --bg: #0E1408;
  --bg-warm: #1A2412;
  --surface: #1F2D17;
  --surface-2: #283920;
  --surface-sunken: #0A0F06;
  --ink: #EEF2E4;
  --ink-2: #DDE6C7;
  --ink-mute: #9DAA82;
  --ink-faint: #6E7E54;
  --line: rgba(238, 242, 228, 0.10);
  --line-strong: rgba(238, 242, 228, 0.22);
  --coral: #A8C97F;
  --coral-deep: #C9DC85;
  --coral-soft: #2A3D1B;
  --coral-tint: #1A2412;
  --honey: #D9E892;
  --honey-soft: #344225;
  --butter: #4A5523;
  --rose: #C8D9A0;
  --plum: #DDE6C7;
  --moss: #B8D082;
  --sky: #6B8A78;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-coral: 0 18px 48px -16px rgba(168, 201, 127, 0.4);
  --hero-bg: #08100A;
  --hero-fg: #EEF2E4;
  --hero-fg-mute: rgba(238, 242, 228, 0.65);
}

/* ─── LAVENDER HAZE (dreamy ethereal — Taylor-coded) ──────── */
.theme-lavender {
  --bg: #ECE5F5;
  --bg-warm: #DBD0EC;
  --surface: #FFFFFF;
  --surface-2: #F2EDFA;
  --surface-sunken: #C8B5DC;
  --ink: #1F0E3D;
  --ink-2: #361E5E;
  --ink-mute: #6D5494;
  --ink-faint: #9A8AB7;
  --line: rgba(31, 14, 61, 0.10);
  --line-strong: rgba(31, 14, 61, 0.22);
  --coral: #7E55D6;
  --coral-deep: #5C2DB8;
  --coral-soft: #D8C5F0;
  --coral-tint: #E8DCFC;
  --honey: #FFD08C;
  --honey-soft: #FFE5C0;
  --butter: #FFF0C8;
  --rose: #D9A8E5;
  --plum: #2C0F4A;
  --moss: #8AA582;
  --sky: #B8D4E8;
  --shadow-sm: 0 1px 2px rgba(31, 14, 61, 0.06);
  --shadow-md: 0 6px 22px -8px rgba(31, 14, 61, 0.20);
  --shadow-lg: 0 24px 60px -20px rgba(31, 14, 61, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(126, 85, 214, 0.42);
  --hero-bg: #18062E;
  --hero-fg: #ECE5F5;
  --hero-fg-mute: rgba(236, 229, 245, 0.65);
}

.theme-lavender-dark {
  --bg: #100620;
  --bg-warm: #1B0E32;
  --surface: #20143A;
  --surface-2: #2B1C4A;
  --surface-sunken: #08020F;
  --ink: #ECE5F5;
  --ink-2: #D5C5E8;
  --ink-mute: #A99CBC;
  --ink-faint: #6D5494;
  --line: rgba(236, 229, 245, 0.10);
  --line-strong: rgba(236, 229, 245, 0.22);
  --coral: #B59FE8;
  --coral-deep: #D8C5F0;
  --coral-soft: #2C0F4A;
  --coral-tint: #1B0E32;
  --honey: #FFCC72;
  --honey-soft: #4A381B;
  --butter: #5C481E;
  --rose: #E5B8E0;
  --plum: #ECE5F5;
  --moss: #A6BD96;
  --sky: #6B8FA3;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
  --shadow-coral: 0 18px 48px -16px rgba(181, 159, 232, 0.4);
  --hero-bg: #06010F;
  --hero-fg: #ECE5F5;
  --hero-fg-mute: rgba(236, 229, 245, 0.65);
}

/* ─── MIDNIGHT BLOOM (royal violet — gothic editorial) ────── */
.theme-midnight {
  --bg: #E8DFF0;
  --bg-warm: #D2C2DE;
  --surface: #FFFFFF;
  --surface-2: #F0E8F5;
  --surface-sunken: #B89FCA;
  --ink: #1A0633;
  --ink-2: #2D0F50;
  --ink-mute: #6B4E89;
  --ink-faint: #957AB0;
  --line: rgba(26, 6, 51, 0.12);
  --line-strong: rgba(26, 6, 51, 0.25);
  --coral: #592B9C;
  --coral-deep: #3D1873;
  --coral-soft: #C8A8E0;
  --coral-tint: #DCC2F0;
  --honey: #FFB347;
  --honey-soft: #FFD9A3;
  --butter: #F5E3A8;
  --rose: #B589C9;
  --plum: #1A0633;
  --moss: #8A6FA0;
  --sky: #C5B3D9;
  --shadow-sm: 0 1px 2px rgba(26, 6, 51, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(26, 6, 51, 0.24);
  --shadow-lg: 0 24px 60px -20px rgba(26, 6, 51, 0.32);
  --shadow-coral: 0 18px 48px -16px rgba(61, 24, 115, 0.45);
  --hero-bg: #08001A;
  --hero-fg: #E8DFF0;
  --hero-fg-mute: rgba(232, 223, 240, 0.65);
}

.theme-midnight-dark {
  --bg: #060114;
  --bg-warm: #0D041F;
  --surface: #150929;
  --surface-2: #1E0F38;
  --surface-sunken: #02000A;
  --ink: #E8DFF0;
  --ink-2: #D5C5E5;
  --ink-mute: #9080A8;
  --ink-faint: #5C4D78;
  --line: rgba(232, 223, 240, 0.08);
  --line-strong: rgba(232, 223, 240, 0.20);
  --coral: #B589FF;
  --coral-deep: #C8A8FF;
  --coral-soft: #1E0F38;
  --coral-tint: #0D041F;
  --honey: #FFC97A;
  --honey-soft: #2D2010;
  --butter: #3A2E14;
  --rose: #D5B5F0;
  --plum: #E8DFF0;
  --moss: #A088C2;
  --sky: #6B5A87;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(181, 137, 255, 0.45);
  --hero-bg: #02000A;
  --hero-fg: #E8DFF0;
  --hero-fg-mute: rgba(232, 223, 240, 0.65);
}

/* ─── BUBBLEGUM (Y2K hot pink + sky blue — internet loud) ── */
.theme-bubblegum {
  --bg: #FFE0EC;
  --bg-warm: #FFC2D9;
  --surface: #FFFFFF;
  --surface-2: #FFF0F5;
  --surface-sunken: #FFA8C5;
  --ink: #2D0820;
  --ink-2: #4A0F38;
  --ink-mute: #893265;
  --ink-faint: #BC7A9F;
  --line: rgba(45, 8, 32, 0.10);
  --line-strong: rgba(45, 8, 32, 0.22);
  --coral: #FF3D8B;
  --coral-deep: #D81A6B;
  --coral-soft: #FFB3D1;
  --coral-tint: #FFDCE8;
  --honey: #82D8FF;
  --honey-soft: #C8EEFF;
  --butter: #FFF0A8;
  --rose: #FFB3D1;
  --plum: #4A0F38;
  --moss: #82C8AB;
  --sky: #82D8FF;
  --shadow-sm: 0 1px 2px rgba(45, 8, 32, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(45, 8, 32, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(45, 8, 32, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(255, 61, 139, 0.45);
  --hero-bg: #1A0612;
  --hero-fg: #FFE0EC;
  --hero-fg-mute: rgba(255, 224, 236, 0.65);
}

.theme-bubblegum-dark {
  --bg: #14040E;
  --bg-warm: #210818;
  --surface: #2A0E20;
  --surface-2: #3A1B2E;
  --surface-sunken: #0A0207;
  --ink: #FFE0EC;
  --ink-2: #FFC8DC;
  --ink-mute: #C594A8;
  --ink-faint: #893265;
  --line: rgba(255, 224, 236, 0.10);
  --line-strong: rgba(255, 224, 236, 0.22);
  --coral: #FF7AB5;
  --coral-deep: #FFA8CC;
  --coral-soft: #4A0F38;
  --coral-tint: #210818;
  --honey: #5CCEFF;
  --honey-soft: #1A3340;
  --butter: #4A3D18;
  --rose: #FFC8DC;
  --plum: #FFE0EC;
  --moss: #82DAA8;
  --sky: #5CCEFF;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(255, 122, 181, 0.4);
  --hero-bg: #08020A;
  --hero-fg: #FFE0EC;
  --hero-fg-mute: rgba(255, 224, 236, 0.65);
}

/* ── 3 new themes per IA followup #3. sage + mocha are FREE; denim
   unlocks at lvl 4. each family has a light + dark variant. ── */

.theme-sage {
  --bg: #EAF1E4;
  --bg-warm: #D7E5CC;
  --surface: #FFFFFF;
  --surface-2: #F2F7EC;
  --surface-sunken: #C3D5B0;
  --ink: #1F2D17;
  --ink-2: #36482A;
  --ink-mute: #6E7E60;
  --ink-faint: #A7B498;
  --line: rgba(31, 45, 23, 0.10);
  --line-strong: rgba(31, 45, 23, 0.22);
  --coral: #4F8C5E;
  --coral-deep: #2A5736;
  --coral-soft: #BDD9C5;
  --coral-tint: #E2F0E5;
  --honey: #E8C57A;
  --honey-soft: #F7E5BA;
  --butter: #F5EDC4;
  --rose: #E9C5C0;
  --plum: #2A5736;
  --moss: #4F8C5E;
  --sky: #B5CFD1;
  --shadow-sm: 0 1px 2px rgba(31, 45, 23, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(31, 45, 23, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(31, 45, 23, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(79, 140, 94, 0.42);
  --hero-bg: #1A271C;
  --hero-fg: #EAF1E4;
  --hero-fg-mute: rgba(234, 241, 228, 0.65);
}
.theme-sage-dark {
  --bg: #0E1810;
  --bg-warm: #182417;
  --surface: #1E2D1F;
  --surface-2: #2C3E2D;
  --surface-sunken: #050B06;
  --ink: #EAF1E4;
  --ink-2: #C9D7BD;
  --ink-mute: #8E9F82;
  --ink-faint: #5C6B53;
  --line: rgba(234, 241, 228, 0.10);
  --line-strong: rgba(234, 241, 228, 0.22);
  --coral: #7AC589;
  --coral-deep: #A6E2B2;
  --coral-soft: #2A5736;
  --coral-tint: #15281A;
  --honey: #E8C57A;
  --honey-soft: #2C2818;
  --butter: #3A3520;
  --rose: #C9A6A0;
  --plum: #EAF1E4;
  --moss: #7AC589;
  --sky: #87A8AB;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(122, 197, 137, 0.38);
  --hero-bg: #050B06;
  --hero-fg: #EAF1E4;
  --hero-fg-mute: rgba(234, 241, 228, 0.65);
}

.theme-mocha {
  --bg: #F4ECE3;
  --bg-warm: #E8D9C2;
  --surface: #FFFFFF;
  --surface-2: #FAF2E9;
  --surface-sunken: #D9C5A8;
  --ink: #2B1B0F;
  --ink-2: #4A2F1D;
  --ink-mute: #80664D;
  --ink-faint: #B79880;
  --line: rgba(43, 27, 15, 0.10);
  --line-strong: rgba(43, 27, 15, 0.22);
  --coral: #B85C3A;
  --coral-deep: #823918;
  --coral-soft: #E9BCA3;
  --coral-tint: #F4DCC9;
  --honey: #D9A763;
  --honey-soft: #F1DBB2;
  --butter: #F0E2B9;
  --rose: #E0BBA8;
  --plum: #4A2F1D;
  --moss: #847A4D;
  --sky: #B7B2A0;
  --shadow-sm: 0 1px 2px rgba(43, 27, 15, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(43, 27, 15, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(43, 27, 15, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(184, 92, 58, 0.42);
  --hero-bg: #1A0F08;
  --hero-fg: #F4ECE3;
  --hero-fg-mute: rgba(244, 236, 227, 0.65);
}
.theme-mocha-dark {
  --bg: #1A0F08;
  --bg-warm: #261813;
  --surface: #2E1E14;
  --surface-2: #3F2C20;
  --surface-sunken: #0C0603;
  --ink: #F4ECE3;
  --ink-2: #E1D2BE;
  --ink-mute: #A38A6F;
  --ink-faint: #6E5B47;
  --line: rgba(244, 236, 227, 0.10);
  --line-strong: rgba(244, 236, 227, 0.22);
  --coral: #E0875F;
  --coral-deep: #F0AB87;
  --coral-soft: #4A2F1D;
  --coral-tint: #261813;
  --honey: #E9BC7E;
  --honey-soft: #2D2417;
  --butter: #3D3625;
  --rose: #BC9181;
  --plum: #F4ECE3;
  --moss: #ABA47B;
  --sky: #9F9A8B;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(224, 135, 95, 0.4);
  --hero-bg: #0C0603;
  --hero-fg: #F4ECE3;
  --hero-fg-mute: rgba(244, 236, 227, 0.65);
}

.theme-denim {
  --bg: #E4ECF2;
  --bg-warm: #CFDBE8;
  --surface: #FFFFFF;
  --surface-2: #F0F4F8;
  --surface-sunken: #B0C5D9;
  --ink: #0F1F33;
  --ink-2: #1F3552;
  --ink-mute: #56708F;
  --ink-faint: #94A8C0;
  --line: rgba(15, 31, 51, 0.10);
  --line-strong: rgba(15, 31, 51, 0.22);
  --coral: #3469A8;
  --coral-deep: #1A467C;
  --coral-soft: #AECBE8;
  --coral-tint: #DAE7F4;
  --honey: #E8B873;
  --honey-soft: #F4E0B8;
  --butter: #F2E2B6;
  --rose: #DBB6C4;
  --plum: #1F3552;
  --moss: #6E8C7A;
  --sky: #6BA6CE;
  --shadow-sm: 0 1px 2px rgba(15, 31, 51, 0.08);
  --shadow-md: 0 6px 22px -8px rgba(15, 31, 51, 0.22);
  --shadow-lg: 0 24px 60px -20px rgba(15, 31, 51, 0.30);
  --shadow-coral: 0 18px 48px -16px rgba(52, 105, 168, 0.42);
  --hero-bg: #0A1320;
  --hero-fg: #E4ECF2;
  --hero-fg-mute: rgba(228, 236, 242, 0.65);
}
.theme-denim-dark {
  --bg: #0A1320;
  --bg-warm: #11203A;
  --surface: #182A4B;
  --surface-2: #243B65;
  --surface-sunken: #04080F;
  --ink: #E4ECF2;
  --ink-2: #C8D5E2;
  --ink-mute: #7E92AD;
  --ink-faint: #455B79;
  --line: rgba(228, 236, 242, 0.10);
  --line-strong: rgba(228, 236, 242, 0.22);
  --coral: #67A0DC;
  --coral-deep: #9ACAF2;
  --coral-soft: #1F3552;
  --coral-tint: #11203A;
  --honey: #E8B873;
  --honey-soft: #2A2417;
  --butter: #3A331E;
  --rose: #B894A2;
  --plum: #E4ECF2;
  --moss: #99B2A4;
  --sky: #6BA6CE;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -8px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  --shadow-coral: 0 18px 48px -16px rgba(103, 160, 220, 0.4);
  --hero-bg: #04080F;
  --hero-fg: #E4ECF2;
  --hero-fg-mute: rgba(228, 236, 242, 0.65);
}

/* base reset */
*, *::before, *::after { box-sizing: border-box; }

.ym {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ym h1, .ym h2, .ym h3, .ym h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}

.ym .display { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.92; }
.ym .serif   { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.ym .mono    { font-family: var(--font-mono); font-feature-settings: 'ss01'; letter-spacing: -0.02em; }

.ym button { font-family: inherit; cursor: pointer; }
.ym input, .ym textarea { font-family: inherit; }

/* utility */
.ym .pill { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill); padding: 4px 10px; font-size: 12px; font-weight: 500; }
.ym .chip-coral { background: var(--coral); color: #fff; }
.ym .chip-tint { background: var(--coral-tint); color: var(--coral-deep); }
.ym .chip-honey { background: var(--honey); color: var(--plum); }
.ym .chip-line { border: 1.5px solid var(--line-strong); color: var(--ink-2); }

/* paper texture (subtle) */
.ym .paper {
  background-image:
    radial-gradient(rgba(74, 26, 20, 0.04) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: 0 0;
}
.theme-dark .paper {
  background-image:
    radial-gradient(rgba(255, 233, 217, 0.04) 1px, transparent 1px);
}

/* mobile frame */
.ym-frame-mobile {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
  position: relative;
  border-radius: 36px;
  font-family: var(--font-body);
}

.ym-status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px 6px;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
}
.ym-status .dots { display: flex; gap: 4px; }
.ym-status .dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ym-status .battery { display: inline-flex; gap: 4px; align-items: center; }

/* desktop frame */
.ym-frame-desktop {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  border-radius: 20px;
  overflow: hidden;
  font-family: var(--font-body);
  display: flex;
  position: relative;
}