/*
 * theme.css — Quiet Hour's design-system values.
 * Editorial × organic-earthy: cream page, moss accent, near-square corners,
 * a serif display used sparingly at large size, a quiet sans body.
 */

:root {
  --canvas: #f6f3ec;
  --surface: #fbfaf6;
  --surface-2: #eee8d9;
  --border: #e1d9c6;
  --border-strong: #c7bca3;
  --ink: #242220;
  --muted: #656461;

  --accent: #3d5a4c;
  --accent-hover: #324b3f;
  --accent-ink: #fbfaf6;
  --accent-text: #3d5a4c;
  --accent-soft: #e4e9df;
  --accent-strong: #3d5a4c;
  --accent-border: #b7c6ba;

  --success: #4a7856;
  --success-ink: #fbfaf6;
  --success-soft: #e6ede2;
  --success-strong: #345a3f;
  --warning: #a2762f;
  --warning-ink: #fbfaf6;
  --warning-soft: #f2e7d3;
  --warning-strong: #825c22;
  --danger: #9c4530;
  --danger-ink: #fbfaf6;
  --danger-soft: #f2e0d8;
  --danger-strong: #7c331f;

  --chart-1: #3d5a4c;
  --chart-2: #9c4530;
  --chart-3: #a2762f;
  --chart-4: #656461;
  --chart-5: #75957f;
  --chart-6: #8a6a49;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.06em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 18px 40px -20px color-mix(in srgb, var(--ink) 30%, transparent);
  --shadow-btn: none;
  --card-pad: 2rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 500;
  --measure: 42.5rem;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1b1d19;
  --surface: #232620;
  --surface-2: #2b2e27;
  --border: #3a3d34;
  --border-strong: #52564a;
  --ink: #f2efe6;
  --muted: #aba795;

  --accent: #7fa08c;
  --accent-hover: #92b29e;
  --accent-ink: #15211a;
  --accent-text: #9bc0a7;
  --accent-soft: #29392e;
  --accent-strong: #a8cab3;
  --accent-border: #405245;

  --success: #6fa07c;
  --success-ink: #12201a;
  --success-soft: #1e3226;
  --success-strong: #9cc9a8;
  --warning: #c99a52;
  --warning-ink: #201808;
  --warning-soft: #392b16;
  --warning-strong: #e0b876;
  --danger: #bd775c;
  --danger-ink: #1e120c;
  --danger-soft: #37231b;
  --danger-strong: #e2a488;

  --chart-1: #8fb39c;
  --chart-2: #c98a72;
  --chart-3: #c9a06a;
  --chart-4: #a5a196;
  --chart-5: #7fae95;
  --chart-6: #ab8a6a;
}

/*
 * app.css — Fieldstone Therapy's own styling: the paper ground and the one
 * entrance on the opening screen. Everything else is primitives and utilities.
 */

/* A quiet, warm paper ground — a faint grain, never a gradient behind type. */
body {
  background-color: var(--canvas);
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 0.6px, transparent 0.6px);
  background-size: 3px 3px;
}

/* The one entrance: the opening line and headline settle in from below.
   Rests visible; the offset is the only thing motion removes. Re-armed by
   app.js on first view, never repeated below the fold. */
[data-inview] > * {
  opacity: 1;
  transform: none;
}
[data-inview].is-entering > * {
  opacity: 0;
  transform: translateY(14px);
}
[data-inview].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out, ease-out), transform 700ms var(--ease-out, ease-out);
}
[data-inview].is-in > *:nth-child(2) { transition-delay: 90ms; }
[data-inview].is-in > *:nth-child(3) { transition-delay: 180ms; }

html.reduced-motion [data-inview].is-entering > *,
html.reduced-motion [data-inview].is-in > * {
  opacity: 1;
  transform: none;
  transition: none;
}