/* ==========================================================================
   Design tokens.
   One place for colour, type, spacing, radius and motion. Every other
   stylesheet consumes these variables — never raw hex values.
   Themes: [data-theme="light"], [data-theme="dark"], or unset = follow system.
   ========================================================================== */

:root {
  /* --- Type ------------------------------------------------------------- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype",
    "Book Antiqua", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  /* --- Radius ----------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- Layout ----------------------------------------------------------- */
  --sidebar-w: 15.5rem;
  --topbar-h: 3.5rem;
  --content-max: 78rem;
  --prose-max: 46rem;
  --tap-min: 44px;

  /* --- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --dur-fast: 110ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* --- Light theme (default) -------------------------------------------- */
  --paper: #faf7f1;
  --paper-2: #f2ece1;
  --surface: #fffdf8;
  --surface-2: #f6f1e7;
  --surface-3: #ece5d7;
  --surface-inset: #f3eee3;

  --ink: #221f1a;
  --ink-soft: #4b453b;
  --ink-muted: #776f62;
  --ink-faint: #a29a8c;
  --ink-inverse: #fdfaf4;

  --line: #e2dbcb;
  --line-strong: #cfc5b1;
  --line-faint: #eee8dc;

  --accent: #8a4f2d;
  --accent-hover: #74401f;
  --accent-ink: #ffffff;
  --accent-soft: #f4e6d9;
  --accent-soft-ink: #6f3d1e;

  --accent-2: #2f5d78;
  --accent-2-soft: #e0ecf3;

  --success: #3d6b48;
  --success-soft: #e2eee3;
  --warning: #8c6220;
  --warning-soft: #f6ead1;
  --danger: #9a3a30;
  --danger-hover: #832d24;
  --danger-soft: #f7e2de;
  --info: #2f5d78;
  --info-soft: #e0ecf3;

  --focus: #2f5d78;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --shadow-sm: 0 1px 2px rgba(41, 32, 20, 0.06), 0 1px 1px rgba(41, 32, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(41, 32, 20, 0.08), 0 1px 3px rgba(41, 32, 20, 0.05);
  --shadow-lg: 0 16px 40px rgba(41, 32, 20, 0.14), 0 2px 8px rgba(41, 32, 20, 0.07);
  --scrim: rgba(34, 27, 18, 0.42);

  /* Story colour markers — used for project covers and entity accents. */
  --marker-clay: #a9603a;
  --marker-moss: #5d7a4f;
  --marker-sea: #3d6f83;
  --marker-plum: #77496b;
  --marker-ochre: #a07a2c;
  --marker-slate: #5c6472;
  --marker-rose: #a2545c;
  --marker-ink: #3b3a44;
}

/* --- Dark theme ---------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper: #14120f;
  --paper-2: #191713;
  --surface: #1c1915;
  --surface-2: #232019;
  --surface-3: #2c281f;
  --surface-inset: #191612;

  --ink: #f1ebe0;
  --ink-soft: #d3cabb;
  --ink-muted: #9e9587;
  --ink-faint: #766d60;
  --ink-inverse: #17140f;

  --line: #332e25;
  --line-strong: #494236;
  --line-faint: #262219;

  --accent: #cf9265;
  --accent-hover: #e0a578;
  --accent-ink: #1d1509;
  --accent-soft: #33261b;
  --accent-soft-ink: #e2b189;

  --accent-2: #86b3cd;
  --accent-2-soft: #1f2a31;

  --success: #86b48f;
  --success-soft: #1e2a20;
  --warning: #d3a45f;
  --warning-soft: #2e2517;
  --danger: #e0857a;
  --danger-hover: #ea9a90;
  --danger-soft: #33201d;
  --info: #86b3cd;
  --info-soft: #1f2a31;

  --focus: #8fc0dc;
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.62);
  --scrim: rgba(0, 0, 0, 0.62);

  --marker-clay: #c9805a;
  --marker-moss: #86a875;
  --marker-sea: #6fa2b8;
  --marker-plum: #ad82a2;
  --marker-ochre: #c9a75a;
  --marker-slate: #97a0b0;
  --marker-rose: #cf8890;
  --marker-ink: #9a99a8;
}

/* Follow the operating system when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --paper: #14120f;
    --paper-2: #191713;
    --surface: #1c1915;
    --surface-2: #232019;
    --surface-3: #2c281f;
    --surface-inset: #191612;

    --ink: #f1ebe0;
    --ink-soft: #d3cabb;
    --ink-muted: #9e9587;
    --ink-faint: #766d60;
    --ink-inverse: #17140f;

    --line: #332e25;
    --line-strong: #494236;
    --line-faint: #262219;

    --accent: #cf9265;
    --accent-hover: #e0a578;
    --accent-ink: #1d1509;
    --accent-soft: #33261b;
    --accent-soft-ink: #e2b189;

    --accent-2: #86b3cd;
    --accent-2-soft: #1f2a31;

    --success: #86b48f;
    --success-soft: #1e2a20;
    --warning: #d3a45f;
    --warning-soft: #2e2517;
    --danger: #e0857a;
    --danger-hover: #ea9a90;
    --danger-soft: #33201d;
    --info: #86b3cd;
    --info-soft: #1f2a31;

    --focus: #8fc0dc;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.62);
    --scrim: rgba(0, 0, 0, 0.62);

    --marker-clay: #c9805a;
    --marker-moss: #86a875;
    --marker-sea: #6fa2b8;
    --marker-plum: #ad82a2;
    --marker-ochre: #c9a75a;
    --marker-slate: #97a0b0;
    --marker-rose: #cf8890;
    --marker-ink: #9a99a8;
  }
}

/* Reading comfort: three text sizes, set in Settings. */
:root[data-density="compact"] { --text-base: 0.875rem; --sp-4: 0.875rem; }
:root[data-density="comfortable"] { --text-base: 1rem; }