/* llmail.dev design tokens + DaisyUI theme overrides */

:root,
[data-theme="llmail"] {
  color-scheme: light;

  /* Brand palette */
  --llmail-mango: #ff8242;
  --llmail-lapis: #27619b;
  --llmail-yellow: #ffae42;
  --llmail-green: #7bb761;

  /* Softer neutrals */
  --llmail-milk: #fff8ee;
  --llmail-cream: #f7eddc;
  --llmail-oat: #eadcc8;
  --llmail-charcoal: #292724;

  --p: 210 60% 38%;
  --pc: 0 0% 100%;
  --s: 22 100% 63%;
  --sc: 35 8% 15%;
  --a: 37 100% 63%;
  --ac: 35 8% 15%;
  --su: 102 37% 55%;
  --suc: 0 0% 100%;
  --wa: 37 100% 63%;
  --wac: 35 8% 15%;
  --er: 0 72% 51%;
  --erc: 0 0% 100%;
  --in: 210 60% 38%;
  --inc: 0 0% 100%;

  --b1: 35 100% 97%;
  --b2: 34 58% 92%;
  --b3: 34 37% 85%;
  --bc: 35 8% 15%;
  --n: 35 8% 15%;
  --nc: 0 0% 100%;

  --rounded-box: 0.5rem;
  --rounded-btn: 0.375rem;
  --tab-radius: 0.375rem;
}

body {
  background:
    radial-gradient(circle at top left, rgb(255 174 66 / 0.12), transparent 30rem),
    hsl(var(--b2));
  color: var(--llmail-charcoal);
}

.card,
.navbar,
.modal-box,
.dropdown-content {
  background-color: var(--llmail-milk);
}

.card,
.modal-box {
  border: 1px solid rgb(41 39 36 / 0.06);
}

/* Nav active state */
.navbar .btn-active {
  background-color: hsl(var(--p) / 0.15);
  color: hsl(var(--p));
  border-color: hsl(var(--p) / 0.25);
  font-weight: 600;
}

/* Dashboard hints — yellow bar, charcoal text */
.hint-bar {
  background-color: var(--llmail-yellow);
  color: var(--llmail-charcoal);
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  margin-top: 0.5rem;
  box-shadow: inset 0 0 0 1px rgb(41 39 36 / 0.08);
}

.hint-bar-text {
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.35;
}

.hint-bar a {
  color: #1e3a5f;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Pricing interval toggle */
.interval-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--llmail-milk);
  border: 1px solid var(--llmail-oat);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px hsl(var(--bc) / 0.06);
}

.interval-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: hsl(var(--bc) / 0.75);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.interval-toggle-btn:hover:not(.is-active) {
  background-color: hsl(var(--b2));
  color: hsl(var(--bc));
}

.interval-toggle-btn.is-active {
  background-color: var(--llmail-lapis);
  color: #fff;
  border-color: var(--llmail-lapis);
  box-shadow: 0 1px 2px hsl(var(--p) / 0.35);
}

.save-badge {
  display: inline-block;
  background-color: var(--llmail-yellow);
  color: var(--llmail-charcoal);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  line-height: 1.2;
}

.interval-toggle-btn.is-active .save-badge {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.35);
}

.pricing-card-featured {
  box-shadow: 0 0 0 2px var(--llmail-mango), 0 4px 14px rgb(255 130 66 / 0.15);
}

.mockup-code pre code { word-break: break-all; }

.conn-status-wrap .status-testing { display: none; }
.conn-status-wrap.htmx-request .status-testing { display: flex; }
.conn-status-wrap.htmx-request .conn-status-result { display: none; }