/* Dottie brand, from the landing page design: navy ink on warm cream, butter yellow and
   sky blue panels, tomato-red buttons and polka dots. Shared by the site, the senior's app
   and the family dashboard (the homepage has its own copy of these in site/home.css).

   Fonts (loaded in each page's <head> from Google Fonts; self-host before launch):
   - Fraunces for headings.
   - Figtree for text: open and friendly, and easy to read at large sizes. */

:root {
  --bg: #fff8ec;
  --surface: #ffffff;
  --tint: #fff1c7;
  --butter: #ffe9a8;
  --sun: #ffd36e;
  --sky: #e3eafe;
  --mint: #bfe3d8;
  --ink: #1b2160;
  --ink-deep: #0e1240;
  --text: #3a3f63;
  --muted: #4a4e70;
  --line: #f0e1c2;
  --line-strong: rgb(27 33 96 / 0.3);
  --accent: #2e3a8c;
  --accent-strong: #1b2160;
  --accent-shadow: #0e1240;
  --on-accent: #ffffff;
  /* Buttons that start something: tomato red, like the homepage. */
  --cta: #c93e26;
  --cta-shadow: #8f2a18;
  --pop: #e8553d;
  --calm: #2f7d5a;
  --calm-soft: #dcefe4;
  --danger: #b8341c;
  --focus: #ffb000;

  --shadow: 0 1px 2px rgb(27 33 96 / 0.06), 0 10px 28px -14px rgb(27 33 96 / 0.25);
  --shadow-lift: 0 2px 4px rgb(27 33 96 / 0.06), 0 18px 40px -18px rgb(27 33 96 / 0.35);
  --radius: 20px;

  /* 4px spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 72px;
  --s9: 112px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  color-scheme: only light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h3 {
  letter-spacing: -0.005em;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1.5px;
}

::selection {
  background: var(--sun);
  color: var(--ink);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Buttons feel like pressable stickers: a solid edge underneath that the button
   sinks into when pressed. */
.btn {
  --edge: 5px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 48px;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out, background-color 150ms ease-out;
}

.btn-primary {
  background: var(--cta);
  color: #fff;
  box-shadow: 0 var(--edge) 0 var(--cta-shadow);
}

.btn-primary:hover {
  transform: translateY(2px);
  box-shadow: 0 calc(var(--edge) - 2px) 0 var(--cta-shadow);
}

.btn-primary:active {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 var(--cta-shadow);
}

/* For deleting things for good. */
.btn-danger {
  background: var(--danger);
  color: var(--bg);
  box-shadow: 0 var(--edge) 0 color-mix(in srgb, var(--danger) 60%, #000);
}

.btn-danger:active {
  transform: translateY(var(--edge));
  box-shadow: 0 0 0 transparent;
}

/* Like the homepage's outlined ("ghost") buttons. */
.btn-secondary {
  background: var(--surface);
  border-color: var(--ink);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: #fff;
}

.btn-secondary:active {
  transform: translateY(2px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.muted {
  color: var(--muted);
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}