/* ---- tokens/colors.css ---- */
:root {
  /* base palette — light only, never dark-mode */
  --paper: #faf6ef;
  --card: #ffffff;
  --ink: #1c1a17;
  --ink-2: #5c574f;
  --ink-3: #948d81;
  --coral: #e34948;
  --coral-deep: #b83030;
  --coral-wash: #fdeceb;
  --sun: #eda100;
  --sun-wash: #fdf3dc;
  --amber: #b36b00;
  --sun-deep: #946400;
  --amber-wash: #f7ead6;
  --green: #0ca30c;
  --green-wash: #e9f6e9;
  --hairline: #e7e0d3;

  /* semantic aliases */
  --bg-page: var(--paper);
  --surface-card: var(--card);
  --surface-ink: var(--ink);          /* dark-ink CTA banners only */
  --text-body: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-ink: var(--paper);
  --text-money: var(--coral-deep);    /* serif totals */
  --accent: var(--coral);
  --accent-deep: var(--coral-deep);
  --accent-wash: var(--coral-wash);
  --status-full: var(--green);        /* "full scan" / success ONLY */
  --status-partial: var(--sun);       /* pins, "partial", PLAN chips */
  --status-dormant: var(--amber);
  --border-hairline: var(--hairline);
  --border-ink: var(--ink);
  --pin: var(--sun);
}

/* ---- tokens/typography.css ---- */
:root {
  /* Warm serif for display, headlines, money numerals, asides (often italic).
     System sans for all UI + body. Iowan Old Style is self-hosted (tokens/fonts.css); Georgia is the fallback. */
  --font-serif: 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 38px;
  --text-display: 56px;      /* hero headlines, serif */
  --text-money-lg: 44px;     /* big serif money numerals */
  --text-money-md: 30px;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.55;
  --tracking-caps: 0.08em;   /* uppercase labels/eyebrows */
}

/* ---- tokens/spacing.css ---- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --container-max: 1120px;
  --container-wide: 1400px;
}

/* ---- tokens/effects.css ---- */
:root {
  /* borders */
  --border-w: 1.5px;

  /* radii */
  --radius-card: 14px;
  --radius-mark: 10px;      /* 44px logo marks */
  --radius-chip: 6px;
  --radius-pill: 999px;

  /* shadows — hard offsets, never blurry drop shadows */
  --shadow-pop: 8px 8px 0 var(--coral);      /* hero sticky cards */
  --shadow-pop-sm: 5px 5px 0 var(--coral);   /* selected tiles */
  --shadow-lift: 3px 3px 0 var(--hairline);  /* quiet hover lift */

  /* sticky-note tilts */
  --tilt-left: -0.7deg; /* @kind other */
  --tilt-right: 0.6deg; /* @kind other */
  --tilt-mid: 0.35deg; /* @kind other */

  /* motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
}

@keyframes sl-ghost-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* ---- tokens/base.css ---- */
body {
  background: var(--bg-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-deep); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
::selection { background: var(--accent-wash); }