/* DragonSpire design system ("the engraved schematic").
   Shared by DragonSpire.io and dragonspireinteractive.com. Dark is the default;
   set data-theme="light" on any element to switch that subtree to light mode. */

/* Fonts load from Google Fonts via <link> tags in each page head (preconnect + stylesheet), not @import, so they do not chain behind this file. */

/* .ink and .diagram-frame__panel always use the dark tokens, even inside a light page. */
:root,
[data-theme="dark"],
.ink,
.diagram-frame__panel {
  --bg: #0F1219;
  --panel: #1A2030;
  --line: #2A3245;
  --text: #EFE6D2;
  --muted: #A3ABBD;

  --gold: #E0B04F;        /* brand, Cory (the brain) */
  --teal: #4FB3A5;        /* Dee Emma (the voice) */
  --ember: #E5793F;       /* FGU Link, Fantasy Grounds (the hands) */
  --periwinkle: #8F9BE8;  /* AI model providers */
  --slate: #8A96AD;       /* Campaign Manager, DragonLibrary (memory, rules) */
  --players: #C9CFDB;     /* players, routers (diagrams) */

  --on-gold: #0F1219;
  --glow: 0.55;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #FAF6EE;
  --panel: #FFFDF8;
  --line: #E2D8C4;
  --text: #2A2418;
  --muted: #6B6354;

  --gold: #936817;
  --teal: #247C76;
  --ember: #B6521D;
  --periwinkle: #5662BD;
  --slate: #647088;
  --players: #5D6678;

  --on-gold: #FFFDF8;
  --glow: 0.25;
  color-scheme: light;
}

:root {
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  /* type scale (fluid) */
  --step-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  --step-h1: clamp(2.25rem, 1.5rem + 3.2vw, 3.75rem);
  --step-h2: clamp(1.75rem, 1.3rem + 2vw, 2.625rem);
  --step-h3: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  --step-body: 1.0625rem;   /* 17 px */
  --step-lede: 1.25rem;
  --step-small: 0.875rem;
  --step-label: 0.75rem;
  --step-stat: clamp(3rem, 2rem + 4vw, 4.5rem);

  --measure: 65ch;
  --hair: 1.5px;
  --radius: 6px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --slow: 1.6s;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

[data-theme] { background: var(--bg); color: var(--text); }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- type ---------- */

.display, h1, h2, h3, .part-name {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.display { font-size: var(--step-display); line-height: 1.0; }
h1 { font-size: var(--step-h1); }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }

p { margin: 0; max-width: var(--measure); }
.lede { font-size: var(--step-lede); line-height: 1.55; color: var(--text); max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: var(--step-small); }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.14em;
  font-size: 1.3rem;
  color: var(--gold);
  margin: 0;
}

.label, .mono {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono { text-transform: none; letter-spacing: 0; font-size: 0.9em; }
code { font-family: var(--font-mono); font-size: 0.92em; }

/* stat: big number in Cormorant, small mono caption */
.stat { display: grid; gap: var(--space-2); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-stat);
  line-height: 0.95;
  color: var(--text);
  font-variant-numeric: lining-nums;
}
.stat__cap { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted); max-width: 24ch; line-height: 1.45; }

/* ---------- buttons ---------- */

.btn {
  --btn-c: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 46px;
  padding: 0.7em 1.35em;
  border-radius: var(--radius);
  border: var(--hair) solid var(--btn-c);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn--primary { background: var(--btn-c); color: var(--on-gold); }
.btn--primary:hover { background: transparent; color: var(--btn-c); }
.btn--secondary { background: transparent; color: var(--text); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--btn-c); color: var(--btn-c); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--gold); padding-inline: 0.2em; }
.btn--ghost:hover { text-decoration: underline; }
.btn .arrow { font-family: var(--font-mono); font-weight: 400; }

/* ---------- surfaces and ornaments ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* Engraved corners: two gold L-ticks on opposite corners. */
.ornate { position: relative; }
.ornate::before,
.ornate::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-color: var(--gold);
  border-style: solid;
  border-width: 0;
}
.ornate::before { top: -1px; left: -1px; border-top-width: var(--hair); border-left-width: var(--hair); }
.ornate::after { bottom: -1px; right: -1px; border-bottom-width: var(--hair); border-right-width: var(--hair); }

.rule { border: 0; height: 0; border-top: 1px solid var(--line); margin: 0; }
.rule--gold { border-top: var(--hair) solid var(--gold); opacity: 0.7; }

/* part colour hook: set --part on any element */
.p-cory    { --part: var(--gold); }
.p-dee     { --part: var(--teal); }
.p-fgu     { --part: var(--ember); }
.p-models  { --part: var(--periwinkle); }
.p-cm      { --part: var(--slate); }
.p-library { --part: var(--slate); }

/* ---------- diagrams ---------- */

.diagram { color: var(--text); }
.diagram .stroke-gold { stroke: var(--gold); }
.diagram .ln { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; }
.diagram .ln--soft { stroke: var(--line); }
.diagram .chamber { fill: var(--panel); stroke: var(--part); stroke-width: 1.5; }
.diagram .chamber-glow { fill: var(--part); opacity: 0.09; }
.diagram .chamber-rule { fill: var(--part); }
.diagram .t-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; fill: var(--text); }
.diagram .t-role { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; fill: var(--part); }
.diagram .t-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--muted); }
.diagram .dot { fill: var(--dot, var(--gold)); filter: drop-shadow(0 0 3px var(--dot, var(--gold))) drop-shadow(0 0 7px var(--dot, var(--gold))); }

/* Draw once on scroll: lines draw, then nodes fade in. */
.js .draw-on-view .ln { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw-on-view .node { opacity: 0; }
.js .draw-on-view .dot { opacity: 0; }
.draw-on-view.is-drawn .ln { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease); }
.draw-on-view.is-drawn .node { opacity: 1; transition: opacity 0.9s var(--ease); transition-delay: calc(1.1s + var(--i, 0) * 0.18s); }
.draw-on-view.is-drawn .dot { opacity: 1; transition: opacity 0.6s var(--ease) 2.4s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .draw-on-view .ln { stroke-dashoffset: 0; }
  .js .draw-on-view .node { opacity: 1; }
  .js .draw-on-view .dot,
  .diagram .dot { opacity: 0 !important; }
}

/* glowing data dot travelling along a line: set --y0 / --y1 (or --x0 / --x1) per dot */
@keyframes ds-travel {
  0%   { transform: translate(var(--x0, 0px), var(--y0, 0px)); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translate(var(--x1, 0px), var(--y1, 0px)); opacity: 0; }
}
.js .draw-on-view:not(.is-drawn) .dot { visibility: hidden; animation-play-state: paused; }