/* Shared site styles: colour tokens, buttons, glass surfaces, badges and type accents. */

:root {
  --ink: 33 33 33;          /* primaryFg */
  --yellow: 244 217 104;    /* highlight.yellow */
  --sage: 191 215 201;      /* highlight.blue */
  --olive: 180 189 85;      /* highlight.green */
  --coral: 246 155 123;     /* highlight.red */
  --orange: 244 192 112;    /* highlight.orange */
  --cell: 249 249 247;      /* primaryBg */
  --given: 235 234 230;     /* cellPrefilled */
  --pen: 95 113 127;        /* pen */
  --pencil: 66 66 66;       /* pencil */
}

.btn-primary,
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.8rem 1.6rem;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: rgb(var(--yellow));
  color: rgb(var(--ink));
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    0 10px 24px -10px rgb(196 160 30 / 0.8);
}

.btn-primary:hover {
  background: #f0cd4a;
  transform: translateY(-1px);
}

.btn-glass {
  background: rgb(255 255 255 / 0.5);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.8);
  color: rgb(var(--ink));
}

.btn-glass:hover {
  background: rgb(255 255 255 / 0.8);
}

.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.875rem;
}

.btn-primary:disabled,
.btn-glass:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

/* ---------- Glass ---------- */

.glass {
  background: rgb(255 255 255 / 0.42);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgb(255 255 255 / 0.75);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 12px 32px -16px rgb(var(--ink) / 0.14);
}

.glass-strong {
  background: rgb(255 255 255 / 0.68);
}

.glass-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.glass-hover:hover {
  transform: translateY(-3px);
  background: rgb(255 255 255 / 0.72);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 22px 44px -18px rgb(var(--ink) / 0.22);
}

/* ---------- Type accents ---------- */

.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(var(--ink) / 0.55);
}

.text-link {
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(var(--yellow));
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  transition: background-color 0.2s ease;
}

.text-link:hover {
  background: rgb(var(--yellow) / 0.35);
}

/* ---------- Badges and chips ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgb(255 255 255 / 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgb(255 255 255 / 0.8);
}

.badge .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: rgb(255 255 255 / 0.45);
  border: 1px solid rgb(255 255 255 / 0.8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background-color 0.2s ease;
}

.chip:hover {
  background: rgb(var(--yellow) / 0.6);
}

.chip .chip-num {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgb(var(--ink) / 0.5);
}

/* App Store links before release (see js/app-store.js): a label, not a button. */
.btn-primary.is-coming-soon {
  background: rgb(var(--yellow) / 0.45);
  box-shadow: none;
}

/* ---------- Lists ---------- */

/* Check-style bullets for "when to use" lists. */
.check-list li {
  position: relative;
  padding-left: 2rem;
}

.check-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.4rem;
  background: rgb(var(--yellow));
}

.check-list li::after {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.32rem;
  width: 0.35rem;
  height: 0.65rem;
  border: solid rgb(var(--ink));
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Small yellow cell bullets for plain lists. */
.cell-list li {
  position: relative;
  padding-left: 1.5rem;
}

.cell-list li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.6em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.15rem;
  background: rgb(var(--yellow));
  box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.12);
}