/* Shared font faces and tokens copied from NPCBank-web/styles.css.
   See assets/README.md for provenance. */
/* ==========================================================================
   NPCBank visual system — "The Illuminated Codex"

   A codex page, not a dashboard. Vellum ground, forest-green ink, and two
   accents with strictly separate jobs: LEAF marks what you can act on (current
   selection, primary action), GILT marks what has been revealed (knowledge the
   NPC's disclosure state permits). Gated knowledge stays outlined, not inked,
   so the product's own gating mechanic remains visible.

   Ornament is only ever encoding real data. A sigil derives from a capability
   id, and a seal derives from a disclosure boundary. Nothing here is drawn
   merely because it looks nice.

   Direction seed: 4c194616 (direction / persuade)
   ========================================================================== */
@font-face {
  font-family: "Alegreya";
  src: url("/assets/fonts/alegreya-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/assets/fonts/alegreyasans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/assets/fonts/alegreyasans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alegreya Sans";
  src: url("/assets/fonts/alegreyasans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Type ------------------------------------------------------------
     Alegreya is a calligraphic humanist serif drawn for long-form literature:
     it carries the codex voice. Alegreya Sans is its matched companion and does
     all the work at small sizes, where a serif would fail in dense tables. */
  --font-display: "Alegreya", Georgia, "Times New Roman", serif;
  --font-ui: "Alegreya Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Fixed rem-anchored scale. Alegreya Sans runs small, so the UI steps sit one
     notch above where a system sans would. */
  --text-2xs: 0.75rem; /* 12px — table micro-labels */
  --text-xs: 0.8125rem; /* 13px — labels, captions */
  --text-sm: 0.875rem; /* 14px — dense table body */
  --text-base: 0.9375rem; /* 15px — default body */
  --text-md: 1.0625rem; /* 17px — prose */
  --text-lg: 1.3125rem; /* 21px — panel titles */
  --text-xl: 1.625rem; /* 26px — section headings */
  --text-2xl: 2.125rem; /* 34px — page titles */
  --text-3xl: 2.75rem; /* 44px */
  /* The opening line is set, so its size follows the column rather than the
     other way round: it never outgrows the leaf it lives on. */
  --text-4xl: clamp(2.25rem, 3.4vw, 3rem); /* 36 → 48px */
  --text-masthead: clamp(1.875rem, 3.4vw, 3.125rem); /* the wordmark, one per site */

  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;

  --tracking-label: 0.1em; /* small caps rubric labels */
  --tracking-tight: -0.005em;

  /* --- Ink -------------------------------------------------------------- */
  --ink-950: #16241c; /* headings, the darkest stroke on the page */
  --ink-900: #1f3328; /* body */
  --ink-800: #2b4235;
  --ink-600: #4f6157; /* secondary text — clears 4.5:1 on every vellum */
  --ink-500: #4f6157;
  --ink-400: #8a988e; /* rules and disabled only. Never text. */

  /* --- Vellum ------------------------------------------------------------
     Three tones of the same skin. The page is the mid tone; a leaf (a written
     page) is brighter; the gutter and rails are sunk. */
  --vellum-page: #ece6d4;
  --vellum-leaf: #f6f2e6;
  --vellum-sunk: #ded6c1;
  --vellum-edge: #cfc5ab; /* the deckle: page boundaries and heavy rules */

  /* --- Leaf: what you can act on ----------------------------------------- */
  --leaf-800: #204a31;
  --leaf-700: #2c6644; /* accent text and links */
  --leaf-600: #377951; /* fills: primary action, active marker, data bars */
  --leaf-500: #4a9367;
  --leaf-300: #a2c4b0;
  --leaf-200: #c6dccd;
  --leaf-100: #dfe9dc;
  --leaf-50: #eaf1e6;

  /* --- Gilt: what has been revealed --------------------------------------
     Illumination. Gilt marks knowledge the disclosure state permits. Anything
     still behind a gate is drawn in outline and never receives it. */
  --gilt-800: #7d552d; /* gilt as text */
  --gilt-600: #a8791f; /* gilt as leaf metal */
  --gilt-300: #d9bd7a;
  --gilt-100: #f0e3c4;
  --gilt-50: #f7f0dc;

  /* --- Rubric: the scribe's red ------------------------------------------ */
  --rubric: #9c3a2c;
  --rubric-bg: #f4e2dd;

  /* --- Semantic status --------------------------------------------------- */
  --status-complete: #2c6644;
  --status-review: #7d552d;
  --status-fail: #9c3a2c;
  --status-generated: #4a6473;

  --status-complete-bg: #dfe9dc;
  --status-review-bg: #f0e3c4;
  --status-fail-bg: #f4e2dd;
  --status-generated-bg: #dfe6ea;

  /* --- Lines ------------------------------------------------------------ */
  --border-subtle: rgba(22, 36, 28, 0.12);
  --border-base: rgba(22, 36, 28, 0.22);
  --border-strong-base: rgba(22, 36, 28, 0.42);

  /* --- Depth. Offset + soft blur; no zero-offset halos. ------------------ */
  --shadow-xs: 0 1px 2px rgba(38, 28, 12, 0.10);
  --shadow-sm:
    0 1px 3px rgba(38, 28, 12, 0.12),
    0 1px 2px rgba(38, 28, 12, 0.07);
  --shadow-md:
    0 6px 18px rgba(38, 28, 12, 0.14),
    0 1px 3px rgba(38, 28, 12, 0.08);
  --shadow-lg:
    0 18px 44px rgba(38, 28, 12, 0.18),
    0 3px 8px rgba(38, 28, 12, 0.10);

  /* --- Geometry --------------------------------------------------------- */
  --radius-leaf: 2px; /* a codex page corner is nearly square */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --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; /* page margins on a codex leaf */

  --explorer-content-max: 1560px;
  --prose-measure: 68ch;

  /* --- Motion ----------------------------------------------------------- */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 260ms;
  --motion-page: 340ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-soft-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Role aliases. Components reference these, not the raw ramps. ------ */
  --text: var(--ink-900);
  --text-main: var(--ink-900);
  --text-strong: var(--ink-950);
  --text-muted: var(--ink-600);
  --text-faint: var(--ink-500);
  --muted: var(--ink-600);

  --page-bg: var(--vellum-page);
  --bg-page: var(--vellum-page);
  --bg-page-soft: var(--vellum-sunk);
  --surface: var(--vellum-leaf);
  --bg-surface: var(--vellum-leaf);
  --bg-surface-raised: var(--vellum-leaf);
  --surface-soft: var(--vellum-page);
  --bg-surface-soft: var(--vellum-page);
  --surface-quiet: var(--vellum-page);
  --bg-surface-cream: var(--vellum-page);
  --surface-warm: var(--leaf-50);
  --bg-surface-mint: var(--leaf-100);
  --bg-mint: var(--leaf-100);
  --bg-leaf-soft: var(--leaf-50);

  --accent: var(--leaf-600);
  --accent-dark: var(--leaf-700);
  --accent-soft: var(--leaf-100);

  --border: var(--border-base);
  --border-soft: var(--border-subtle);
  --border-medium: var(--border-base);
  --border-strong: var(--border-strong-base);

  --fail: var(--status-fail);
  --warning: var(--status-review);
  --complete: var(--status-complete);
  --generated: var(--status-generated);

  --shadow-soft: var(--shadow-sm);
  --shadow-lift: var(--shadow-md);
  --shadow-float: var(--shadow-lg);

  /* Legacy names still referenced by component rules. Mapped onto the ramps
     above so the system has exactly one source of truth; they retire as each
     component is rewritten. */
  --font-sans: var(--font-ui);
  --font-display: var(--font-ui);
  --leaf-950: var(--ink-950);
  --leaf-900: var(--ink-900);
  --mint-300: var(--leaf-300);
  --mint-400: var(--leaf-500);
  --moss-600: var(--leaf-700);
  --moss-500: var(--leaf-600);
  --moss-400: var(--leaf-500);
  --moss-100: var(--leaf-100);
  --cream-200: var(--vellum-page);
  --sand-300: var(--border-strong-base);
  --wood-500: var(--ink-600);
  --peach-200: var(--status-review-bg);
  --peach-300: var(--status-review);
  --rose-200: var(--status-fail-bg);
  --lavender-300: var(--status-generated-bg);
  --lavender-500: var(--status-generated);
  --sky-200: var(--status-generated-bg);
  --palia-blue-100: var(--leaf-100);
  --palia-blue-400: var(--leaf-300);
  --palia-blue-600: var(--leaf-600);
  --palia-blue-700: var(--leaf-700);
}