@layer reset, tokens, base, components, pages, accessibility;
@layer tokens {
  :root {
    color-scheme: light;
    --paper: #f6f2e8; --paper-light: #fffcf5; --sky: #e4eeea;
    --green: #344f42; --green-deep: #243f33; --green-soft: #e2e9dc;
    --flower-cream: #faf0d9; --flower-gold: #b88a3f; --flower-rose: #a16d70;
    --ink: #293c32; --muted: #505f53; --line: #c5cebf;
    --cloud-overlay: rgb(215 225 224 / 35%); --rain-overlay: rgb(73 98 110 / 12%);
    --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
    --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem;
    --radius-small: 14px; --radius-card: 28px; --radius-pill: 999px;
    --shadow: 0 16px 48px rgb(45 63 46 / 7%);
    --font-body: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  }
}
@layer reset {
  * { box-sizing: border-box; }
  body { margin: 0; }
  button, a { -webkit-tap-highlight-color: transparent; }
  button { font: inherit; }
  svg { display: block; }
}
@layer base {
  html { background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 21px; }
  body { min-height: 100svh; line-height: 1.55; }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { overflow-wrap: anywhere; }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; }
  h1 { font-size: clamp(2.8rem, 6vw, 4.8rem); letter-spacing: -.045em; }
  h2 { font-size: clamp(1.7rem, 3vw, 2.25rem); letter-spacing: -.025em; }
  h3 { font-size: 1.4rem; }
  a { color: var(--green); text-underline-offset: .2em; }
  button { cursor: pointer; }
  button:disabled { cursor: default; opacity: .6; }
  ::selection { background: var(--green-soft); color: var(--ink); }
}
@layer components {
  .eyebrow { color: var(--muted); text-transform: uppercase; letter-spacing: .15em; font-size: .66rem; font-weight: 650; }
  .primary-action, .secondary-action, .text-action {
    display: inline-flex; align-items: center; justify-content: center; gap: .7rem;
    min-height: 60px; padding: .75rem 1.3rem; border-radius: var(--radius-pill);
    border: 1px solid transparent; text-decoration: none; font-weight: 600; line-height: 1.3;
  }
  .primary-action { background: var(--green); color: var(--paper-light); box-shadow: 0 6px 16px rgb(45 63 46 / 10%); }
  .secondary-action { background: var(--paper-light); border-color: var(--line); color: var(--green); }
  .text-action { color: var(--green); background: transparent; }
  .icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
  .botanical-mark { width: 100%; height: 100%; color: var(--green); }
  .muted { color: var(--muted); }
  @media (hover: hover) {
    .primary-action:hover:not(:disabled) { background: var(--green-deep); }
    .secondary-action:hover, .text-action:hover { background: var(--green-soft); }
  }
}
@layer accessibility {
  [hidden] { display: none !important; }
  :focus-visible { outline: 3px solid var(--green-deep); outline-offset: 5px; }
  .primary-action:focus-visible { outline-offset: 5px; }
  .skip-link { position: fixed; top: 12px; left: 12px; z-index: 20; padding: .6rem 1rem; background: var(--paper-light); transform: translateY(-200%); }
  .skip-link:focus { transform: translateY(0); }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
  @media (forced-colors: active) { button, .primary-action, .secondary-action, .story-card { border: 1px solid ButtonText; } }
}
@layer base {
  button, a, input[type="range"] { touch-action: manipulation; }
  input, select, textarea { font: inherit; font-size: max(16px, 1rem); }
  body { min-height: 100vh; min-height: 100svh; }
}
@layer pages {
  .welcome-shell { min-height: 100vh; min-height: 100svh; }
}