/* Design tokens, round 2: "The Reading Room".
   Parchment pages, ink-brown text, moss green accent, brass highlights, Manrope throughout.
   Values follow the landing-page-design skill (spacing, type scale, radius); the palette
   is the user's brown and green. Components only read these names. See decisions M9. */
:root {
  /* colour: light (default) */
  --bg: #f4ecdb;             /* parchment page */
  --bg-subtle: #eadfc6;      /* alternate sections */
  --bg-inset: #e1d3b4;       /* placeholders, skeletons */
  --surface: #fbf6ea;        /* cards sit on this */
  --text: #2e2015;
  --text-muted: #5f4a35;     /* 7.0:1 on --bg */
  --line: #d9c9a6;
  --line-strong: #8a7355;    /* 3.9:1 on --bg, input borders */
  --accent: #2f5540;         /* moss */
  --logo-ink: #23382c;       /* logo.svg */
  --logo-paper: #ffffff;
  --accent-hover: #3d6a4c;
  --accent-text: #f4ecdb;
  --accent-soft: #dde4d0;
  --brass: #d9b56c;          /* marketing call to action, highlights */
  --brass-hover: #ecca82;
  --brass-text: #24180d;
  --leather: #23402f;        /* dark green bands */
  --footer: #182c20;
  --footer-text: #cdbf9f;
  --focus: #2f5540;
  --ok: #2f5540;
  --warn: #8a5a14;
  --warn-soft: #f3e3c4;
  --danger: #8b3a2a;
  --danger-soft: #f2dbd2;
  --header: rgba(251, 246, 234, 0.8);

  /* type: one typeface, Manrope, self hosted (fonts/, SIL OFL) */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: var(--font);  /* kept so older rules resolve; no second typeface */
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Tailwind scale steps only */
  --step--1: 0.875rem;  /* 14 / 20 */
  --step-0: 1rem;       /* 16 / 24 */
  --step-1: 1.25rem;    /* 20 / 28 */
  --step-2: 1.875rem;   /* 30 / 36 */
  --step-3: 2.25rem;    /* 36 / 40 */
  --step-4: 3rem;       /* 48 / 48 */
  --leading: 1.5;

  /* space: the skill's scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 80px;

  /* shape */
  --radius: 8px;       /* rounded-lg */
  --radius-lg: 12px;   /* rounded-xl */
  --radius-full: 9999px;
  --shadow: 0 1px 2px rgba(46, 32, 21, 0.06), 0 8px 24px rgba(46, 32, 21, 0.08);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --measure: 66ch;
  --page: 72.5rem;
  --gutter: 16px;
}

@media (min-width: 48rem) {
  :root { --gutter: 32px; }
}

/* dark: backgrounds from the skill's list, warm text, light moss accent */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131209;
    --bg-subtle: #181818;
    --bg-inset: #272727;
    --surface: #1F1F1F;
    --text: #f0e5cf;
    --text-muted: #cbb898;
    --line: #313131;
    --line-strong: #8a7d66;
    --accent: #9fc9a9;
    --logo-ink: #9fc9a9;
    --logo-paper: #131209;
    --accent-hover: #b6d6bb;
    --accent-text: #131209;
    --accent-soft: #272727;
    --leather: #181818;
    --footer: #000000;
    --focus: #d9b56c;
    --ok: #9fc9a9;
    --warn: #e0b46a;
    --warn-soft: #272727;
    --danger: #e39c86;
    --danger-soft: #272727;
    --header: rgba(31, 31, 31, 0.8);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}
:root[data-theme="dark"] {
  --bg: #131209;
  --bg-subtle: #181818;
  --bg-inset: #272727;
  --surface: #1F1F1F;
  --text: #f0e5cf;
  --text-muted: #cbb898;
  --line: #313131;
  --line-strong: #8a7d66;
  --accent: #9fc9a9;
  --logo-ink: #9fc9a9;
  --logo-paper: #131209;
  --accent-hover: #b6d6bb;
  --accent-text: #131209;
  --accent-soft: #272727;
  --leather: #181818;
  --footer: #000000;
  --focus: #d9b56c;
  --ok: #9fc9a9;
  --warn: #e0b46a;
  --warn-soft: #272727;
  --danger: #e39c86;
  --danger-soft: #272727;
  --header: rgba(31, 31, 31, 0.8);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
}