/* =====================================================================
   DESIGN TOKENS — the single place where a visual decision is made.

   The same palette as the public site and the Android application, so the
   three read as one institution. Change a value here and it changes
   everywhere; nothing below this file hard-codes a colour.

   SECTIONS
     1. Brand
     2. Light surfaces (default)
     3. Semantic
     4. Typography
     5. Space, radius, shadow, motion
     6. Dark surfaces
   ===================================================================== */

:root {
  /* ------------------------------------------------------- 1. brand */
  --ochre: #a8621f;
  --ochre-light: #d08a3c;
  --ochre-deep: #7d4715;
  --ochre-tint: rgba(168, 98, 31, 0.12);
  --indigo: #26415e;
  --indigo-tint: rgba(38, 65, 94, 0.12);

  /* --------------------------------------------- 2. light surfaces */
  --bg: #f7f4ee;
  --bg-grad: radial-gradient(1200px 600px at 12% -10%, #fdfbf7 0%, #f7f4ee 60%);
  --surface: #ffffff;
  --surface-2: #f6f1e8;
  --surface-3: #efe8db;
  --line: #e5dccc;
  --line-strong: #d6c8af;
  --ink: #1a1714;
  --ink-2: #5d5548;
  --ink-3: #8d8474;

  /* ---------------------------------------------------- 3. semantic */
  --ok: #2e7d57;
  --ok-tint: rgba(46, 125, 87, 0.12);
  --warn: #b4791b;
  --warn-tint: rgba(180, 121, 27, 0.12);
  --danger: #a32f2b;
  --danger-tint: rgba(163, 47, 43, 0.1);

  /* -------------------------------------------------- 4. typography */
  --font-ui: "InterAdmin", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "SerifAdmin", "Iowan Old Style", Palatino, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs: 11.5px;
  --text-sm: 13px;
  --text-base: 14.5px;
  --text-md: 16px;
  --text-lg: 19px;
  --text-xl: 24px;
  --text-2xl: 30px;

  /* ---------------------------------- 5. space, radius, shadow, motion */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 28px;
  --s7: 40px;
  --s8: 56px;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 23, 20, 0.04),
    0 4px 12px rgba(26, 23, 20, 0.04);
  --shadow-md: 0 2px 6px rgba(26, 23, 20, 0.05),
    0 12px 28px rgba(26, 23, 20, 0.07);
  --shadow-lg: 0 8px 20px rgba(26, 23, 20, 0.1),
    0 30px 60px rgba(26, 23, 20, 0.12);
  --ring: 0 0 0 3px rgba(168, 98, 31, 0.28);

  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --rail: 268px;
  --topbar: 62px;
  --measure: 1080px;

  color-scheme: light dark;
}

/* ------------------------------------------------------ 6. dark surfaces
   Applied when the operating system asks for dark, unless the reader has
   explicitly chosen light; and always when they have chosen dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110;
    --bg-grad: radial-gradient(1200px 600px at 12% -10%, #1b1815 0%, #121110 60%);
    --surface: #1c1a17;
    --surface-2: #232019;
    --surface-3: #2b261e;
    --line: #2e2a25;
    --line-strong: #413a31;
    --ink: #f2ede4;
    --ink-2: #c6bdad;
    --ink-3: #8a8173;
    --ochre: #d08a3c;
    --ochre-deep: #b4711f;
    --ochre-tint: rgba(208, 138, 60, 0.14);
    --indigo: #7ea3cc;
    --indigo-tint: rgba(126, 163, 204, 0.14);
    --ok: #5cbb8c;
    --warn: #d9a13f;
    --danger: #e38b87;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.24);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.34);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #121110;
  --bg-grad: radial-gradient(1200px 600px at 12% -10%, #1b1815 0%, #121110 60%);
  --surface: #1c1a17;
  --surface-2: #232019;
  --surface-3: #2b261e;
  --line: #2e2a25;
  --line-strong: #413a31;
  --ink: #f2ede4;
  --ink-2: #c6bdad;
  --ink-3: #8a8173;
  --ochre: #d08a3c;
  --ochre-deep: #b4711f;
  --ochre-tint: rgba(208, 138, 60, 0.14);
  --indigo: #7ea3cc;
  --indigo-tint: rgba(126, 163, 204, 0.14);
  --ok: #5cbb8c;
  --warn: #d9a13f;
  --danger: #e38b87;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.45);
}