/* 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&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);
}

/* 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;
}