/* ============================================================
   Plinth by Finclara — Design Tokens  (v1.0.0)
   Single source of truth for the broadsheet aesthetic, app-tuned.
   Satisfies APP_READINESS A4: tokens are framework-agnostic and
   portable to the website and a future native build.
   ============================================================ */
:root {
  /* ── Palette (canonical, from finclara.co) ── */
  --paper: #f7f3ea;
  --paper-2: #efe9da;
  --sage: #e9ecdf;
  --cream: #fffdf6;
  --ink: #1c1a16;
  --ink-soft: #5a5142;
  --rule: #d8d1bf;
  --rule-dark: #1c1a16;
  --green: #1c4d3a;
  --green-soft: #2a6b52;
  --saffron: #b54708;
  --midnight: #16243d;

  /* ── Semantic ── */
  --bg: var(--paper);
  --surface: var(--cream);
  --surface-2: var(--paper-2);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --accent: var(--green);
  --accent-2: var(--saffron);
  --positive: var(--green-soft);
  --negative: var(--saffron);
  --focus: var(--green);

  /* ── Typography ── */
  --serif: "Fraunces", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --fs-micro: 9.5px;
  --fs-label: 11px;
  --fs-small: 13px;
  --fs-base: 16px;
  --fs-lead: 18px;
  --fs-title: 22px;
  --fs-display: 30px;
  --lh-tight: 1.15;
  --lh-base: 1.6;
  --track-caps: 0.14em;

  /* ── Space scale ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;

  /* ── Shape (broadsheet: near-square corners, print shadows) ── */
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 12px;
  --shadow-print: 2px 2px 0 rgba(28, 26, 22, 0.07);
  --shadow-print-strong: 3px 3px 0 rgba(28, 26, 22, 0.15);
  --hairline: 1px solid var(--rule);

  /* ── Motion ── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.44, 1);
  --dur-1: 150ms;
  --dur-2: 260ms;
  --dur-3: 420ms;

  /* ── App layout ── */
  --tab-h: 58px;
  --mast-h: 52px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --z-sheet: 60;
  --z-toast: 70;
  --z-banner: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}