@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Syne:wght@700;800&family=Instrument+Serif:ital@1&display=swap");

:root {
  --paper: #EEEEE9;
  --ink-50:  #F5F5F1;
  --ink-100: #E6E6DF;
  --ink-200: #C9C9BD;
  --ink-400: #8A8A7E;
  --ink-500: #6E6E63;
  --ink-700: #3F3F38;
  --ink-900: #15150F;
  --brand-50: #F4FBE6;
  --brand-300: #C8F177;
  --brand-400: #B8F55A;
  --brand-500: #9DDB3F;
  --brand-600: #79B025;
}

html, body { background: var(--paper); color: var(--ink-900); font-family: "DM Sans", system-ui, sans-serif; }

.heading-display { font-family: "Syne", sans-serif; line-height: 1; }
.heading-serif { font-family: "Instrument Serif", serif; font-style: italic; letter-spacing: 0.01em; }

.btn-accent {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  background: var(--brand-400); color: var(--ink-900);
  font-weight: 600; font-size: .85rem;
  border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease;
}
.btn-accent:hover { background: var(--brand-300); transform: translateY(-1px); }
.btn-accent:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.4rem; border-radius: 999px;
  background: transparent; color: var(--ink-900);
  font-weight: 600; font-size: .85rem;
  border: 1px solid var(--ink-200);
}
.btn-ghost:hover { border-color: var(--ink-900); }

.card { background: #fff; border: 1px solid var(--ink-100); border-radius: 1.25rem; }
.eyebrow { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-500); font-weight: 600; }
.tab { padding: .65rem 1rem; border-radius: 999px; font-size: .85rem; color: var(--ink-500); font-weight: 500; }
.tab.active { background: var(--ink-900); color: #fff; }

.input {
  width: 100%; padding: .85rem 1rem; border-radius: .85rem;
  border: 1px solid var(--ink-100); background: #fff; font-size: .9rem;
  color: var(--ink-900); outline: none;
}
.input:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(157,219,63,.25); }

.session-card { transition: transform .15s ease; }
.session-card:hover { transform: translateY(-2px); }