/* Swapple — Editorial Orchard design tokens
   Light tokens mirror src/styles.css; dark tokens mirror [data-theme="dark"].
   New tokens prefixed sw- so they don't clash with the live app's --foo names.
   Light mode tuned warmer/papery (more Claude-cream); dark mode glimmer toned
   down so it never reads as a bright white glare. */

:root {
  /* Paper — warmer, more Claude-cream than v1. Slightly more chroma toward orange. */
  --sw-paper: #f4eddc;
  --sw-paper-raised: #fbf6e8;
  --sw-paper-deep: #e9e0c8;
  --sw-ink: #2f2a22;
  --sw-ink-muted: #7a705f;
  --sw-ink-soft: #ada392;
  --sw-rule: #d8cbb1;
  --sw-rule-strong: #b59a3c;
  --sw-green: #5da66f;
  --sw-green-edge: #488c5a;
  --sw-green-deep: #2f6b41;
  --sw-yellow: #e3c85f;
  --sw-yellow-edge: #bfa33f;
  --sw-apple: #c2412e;
  --sw-apple-deep: #8e2f23;
  --sw-bark: #5b4326;
  --sw-leaf: #5da66f;
  --sw-shadow: rgba(64, 54, 40, 0.14);
  --sw-shadow-soft: rgba(64, 54, 40, 0.08);

  /* PaperBg wash tunings — light mode keeps the warm cream-on-cream glow */
  --sw-paper-bg-top-color: 255, 248, 232;
  --sw-paper-bg-top-alpha: 0.7;
  --sw-paper-bg-warm-color: 194, 65, 46;
  --sw-paper-bg-warm-alpha: 0.05;
}

.sw-dark {
  --sw-paper: #25221c;
  --sw-paper-raised: #2f2b23;
  --sw-paper-deep: #1a1813;
  --sw-ink: #f5efe1;
  --sw-ink-muted: #b2a994;
  --sw-ink-soft: #6f6757;
  --sw-rule: #4a443a;
  --sw-rule-strong: #d6b94a;
  --sw-green: #6cb87f;
  --sw-green-edge: #4f9763;
  --sw-green-deep: #aedab6;
  --sw-yellow: #e6cd66;
  --sw-yellow-edge: #c5a83b;
  --sw-apple: #df5a48;
  --sw-bark: #8a6a48;
  --sw-shadow: rgba(0, 0, 0, 0.45);
  --sw-shadow-soft: rgba(0, 0, 0, 0.28);

  /* PaperBg in dark mode — replace the bright white-cream glare with a warm
     ember glimmer. This is what makes mobile cards A & B feel calm again. */
  --sw-paper-bg-top-color: 247, 188, 110;
  --sw-paper-bg-top-alpha: 0.06;
  --sw-paper-bg-warm-color: 194, 65, 46;
  --sw-paper-bg-warm-alpha: 0.06;
}

/* PaperBg decorative layers — controlled by the tokens above */
.sw-paper-bg__top {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 55% at 50% 0%,
    rgba(var(--sw-paper-bg-top-color), var(--sw-paper-bg-top-alpha)),
    transparent 70%
  );
  pointer-events: none;
}
.sw-paper-bg__warm {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 50% at 100% 100%,
    rgba(var(--sw-paper-bg-warm-color), var(--sw-paper-bg-warm-alpha)),
    transparent 80%
  );
  pointer-events: none;
}

/* Page reset */
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #ece6d8;
  color: #2c2820;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Serif display stack */
.sw-serif { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", ui-serif, serif; }

/* Tabular numerals for HUD scores */
.sw-tabular { font-variant-numeric: tabular-nums; }

/* Letter-spacing helpers */
.sw-eyebrow {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}