/* theme.css — locked.
 *
 * Design tokens only: palette, typography, spacing, pixel-rendering rules,
 * tap-target sizes, mobile breakpoints. No layout. No component styles.
 *
 * Palette is sampled from Cup Nooble's Sprout Lands default palette
 * (assets/vendor/sprout-lands/Sprout Lands color pallet/) — soft pastel
 * earth tones, warm wood browns, sage and pistachio greens. Stardew
 * Valley register: cozy, mid-saturation, slightly washed.
 *
 * Mobile-first; the page must read well at 375px wide on a phone in
 * morning light. */

:root {
  /* Sprout Lands palette — sky / ground / wood / accents. */
  --c-sky-light:        #f4e3c4;   /* warm cream sky, top of gradient */
  --c-sky-mid:          #ecd0a6;   /* late-dawn warm peach */
  --c-grass-light:      #b9d685;   /* pistachio meadow */
  --c-grass:            #8db26a;   /* sprout-lands signature grass green */
  --c-grass-shadow:     #5d8c4b;   /* shadow under foliage */
  --c-wood-dark:        #6e4a3a;   /* cabin trim, shadow line */
  --c-wood:             #a87253;   /* cabin walls (warm brown) */
  --c-wood-light:       #d4a373;   /* cabin walls highlight */
  --c-cream:            #f9efd2;   /* page background, cozy paper */
  --c-cream-soft:       #ede0bd;
  --c-rose:             #d77a76;   /* accent — flowers, ember */
  --c-plum:             #6e4565;   /* accent — dusk shadow, ink */
  --c-ink:              #3a2a3a;   /* body text */
  --c-purple-soft:      #a98aaf;   /* outline text on warm bg */

  /* Background and surface defaults. */
  --bg-page:    var(--c-cream);
  --bg-scene:   var(--c-sky-light);
  --fg-text:    var(--c-ink);
  --fg-muted:   var(--c-plum);

  /* Typography. Pixel font for markers; warm serif for body. */
  --font-body:  ui-serif, Georgia, "Iowan Old Style", "Apple Garamond", "Palatino Linotype", serif;
  --font-mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
  --font-pixel: "VT323", "Press Start 2P", var(--font-mono);

  --fs-body:    16px;
  --fs-small:   14px;
  --fs-marker:  18px;
  --fs-tiny:    12px;
  --lh-body:    1.55;

  /* Spacing scale. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;

  /* Mobile-first sizing (RULES.md Article VIII). */
  --tap-min:        44px;
  --content-max:    420px;
  --gutter:         16px;

  /* Sprite scale — multiply native 16-px tile dimensions. */
  --pixel-scale:    4;
  --tile:           calc(16px * var(--pixel-scale));   /* 64px */

  /* Pixel art rendering — never override. */
  --pixel-render:   pixelated;

  --shadow-soft:    0 2px 0 rgba(58, 42, 58, 0.10);
  --shadow-frame:   0 4px 0 rgba(58, 42, 58, 0.18);
}

/* Reset just enough to make mobile layout predictable. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--fg-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  overflow-x: hidden;
}

img, picture, canvas {
  image-rendering: var(--pixel-render);
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

a, button {
  min-height: var(--tap-min);
  min-width:  var(--tap-min);
  color: var(--c-wood-dark);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-rose);
  outline-offset: 2px;
}

#day-marker {
  font-family: var(--font-pixel);
  font-size: var(--fs-marker);
  color: var(--fg-muted);
}

@media (min-width: 600px) {
  :root { --content-max: 560px; }
}
@media (min-width: 900px) {
  :root { --content-max: 720px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-page:  var(--c-plum);
    --bg-scene: var(--c-wood-dark);
    --fg-text:  var(--c-cream);
    --fg-muted: var(--c-cream-soft);
  }
  /* Anchor color in dark mode — the default warm-wood-on-cream loses contrast
     against the plum background. Switch to cream + ember accent. */
  a, button {
    color: var(--c-cream);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}