/* The site's look, shared by every page: deep forest green on cream, heavy
   system type, pill-shaped labels and soft rounded cards. Each page keeps its
   own layout; this file only decides how it is dressed. It is linked after the
   page's own <style>, so where both set something, this wins. */

:root {
  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --green-deep: #173F32;
  --green: #245B45;
  --green-bright: #78A982;
  --green-soft: #EAF3E9;

  --heading: #173F32;
  --ink: #20332A;
  --body: #64736A;
  --faint: #7D8C83;
  --ground: #FBFAF5;
  --plate: #FFFFFF;
  --rule: #DCE6DC;
  --slab: #173F32;
  --slab-body: #D5E5D8;
  --slab-rule: #245B45;

  --shot-frame: #DCE6DC;
  --shot-back: #F0F5ED;

  --shadow: 0 18px 55px rgba(23, 63, 50, .11);
  --shadow-soft: 0 8px 25px rgba(23, 63, 50, .05);
}

/* Dark: the same forest, turned down. The accent moves to the leaf green,
   because the deep one disappears against a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --green-deep: #9CCAA5;
    --green: #8BBE95;
    --green-soft: #17301F;
    --heading: #EAF3E9;
    --ink: #E3EEE6;
    --body: #A7B9AD;
    --faint: #7F9386;
    --ground: #0C1C16;
    --plate: #132820;
    --rule: #22392E;
    --slab: #102F25;
    --slab-body: #A9C1B0;
    --slab-rule: #1C4232;
    --shot-frame: #22392E;
    --shot-back: #0F231B;
    --shadow: 0 18px 55px rgba(0, 0, 0, .35);
    --shadow-soft: none;
  }
}

:root[data-theme="dark"] {
  --green-deep: #9CCAA5;
  --green: #8BBE95;
  --green-soft: #17301F;
  --heading: #EAF3E9;
  --ink: #E3EEE6;
  --body: #A7B9AD;
  --faint: #7F9386;
  --ground: #0C1C16;
  --plate: #132820;
  --rule: #22392E;
  --slab: #102F25;
  --slab-body: #A9C1B0;
  --slab-rule: #1C4232;
  --shot-frame: #22392E;
  --shot-back: #0F231B;
  --shadow: 0 18px 55px rgba(0, 0, 0, .35);
  --shadow-soft: none;
}

body { font-family: var(--sans); }

h1, h2, h3 { color: var(--heading); }
h1 { font-weight: 900; letter-spacing: -0.045em; }
h2 { font-weight: 800; letter-spacing: -0.035em; }
h3 { font-weight: 750; }

.wordmark {
  font-weight: 900;
  color: var(--heading);
}

/* Section labels become the pill they are in the app's marketing. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
}

/* Cards: rounder, lifted a little off the cream. */
.ask-card, .pillar, .plate, .shot { border-radius: 22px; }
.ask-card { box-shadow: var(--shadow); }
.pillar, .plate:not(.soft), .features { box-shadow: var(--shadow-soft); }
.features { border-radius: 22px; }
.closer { border-radius: 30px; }
.notif { border-radius: 15px; }
.ask-add { border-radius: 999px; }
.tick { border-radius: 6px; }