/* ============================================================================
   Palimplace — shared design theme.  Apache-2.0.
   ----------------------------------------------------------------------------
   ONE source of truth for the locked brand. Every page should @import or <link>
   this first, then layer page-specific rules on top. Consolidation, not redesign:
   the tokens below are brand-true, and the component classes are deliberately
   minimal so adopting them changes nothing visible.

   Brand lock (do not edit values):
     ink #0b0f14 · paper #f2ece0 · ember #ffb13d (attested/evidence/warm)
     signal #52cdf5 (inferred/derived/cool) · slate #828f9e
     Fraunces (display ~500) · Hanken Grotesk (body) · IBM Plex Mono (data)

   Canonical token names — ONE name per concept. When migrating a page, rename
   its local aliases to these (see the per-file migrations). The seam is the
   thesis: ember is the ONLY attested colour, signal the ONLY inferred colour.
   ========================================================================== */

:root {
  /* ---- Ground & surfaces ------------------------------------------------ */
  --ink:     #0b0f14;            /* darkest base / page background ("fog" ground) */
  --ink-rgb: 11, 15, 20;         /* ink as channels — for rgba() nav backdrops, */
                                 /*   e.g. background: rgba(var(--ink-rgb), .86) */
  --panel:   #10161e;            /* raised surface: cards, floating chrome.       */
                                 /*   Viewer overlays it translucent; do that     */
                                 /*   locally as rgba(13,19,26,.92) if you need    */
                                 /*   the blur — the token stays the solid value.  */
  --panel-2: #0d131a;            /* inset surface: fields, menus, code wells.      */

  /* ---- Hairlines -------------------------------------------------------- */
  --line: #212b36;               /* default 1px border / divider                  */
  --hair: #2c3743;               /* lighter hairline — hover / emphasis borders   */

  /* ---- Foreground & muted ----------------------------------------------- */
  --paper:     #f2ece0;          /* warm off-white — headings, wordmark emphasis  */
  --paper-ink: #1a1712;          /* warm dark ink for text ON a paper surface     */
  --text:      #cdd6e0;          /* default readable body text on ink             */
  --slate:     #828f9e;          /* muted blue-grey — meta, labels, captions      */
  --muted:     var(--slate);     /* alias of slate (viewer/contributor/story use  */
                                 /*   the name --muted; keep it pointing at slate) */

  /* ---- The seam (locked accents + their ramps) -------------------------- */
  --ember:      #ffb13d;         /* ATTESTED / evidence / warm. The only one.     */
  --ember-deep: #d98e22;         /* darker ember — borders, hover                 */
  --ember-soft: #e8b878;         /* lighter ember — soft text, underlines         */
  --on-ember:   #2a1c06;         /* dark ink for text on a filled-ember surface   */

  --signal:      #52cdf5;        /* INFERRED / derived / cool. The only one.      */
  --signal-deep: #2f9ec4;        /* darker signal — borders, focus rings          */
  --signal-soft: #86bdd6;        /* lighter signal — hover / soft text            */

  --fog: #2a3340;                /* "unknown / no evidence" tone (viewer legend,  */
                                 /*   south needle). Distinct from the accents.   */

  /* ---- Status (utility, outside the 5-colour core) ---------------------- */
  --ok:  #6ee7a8;                /* valid / success                               */
  --bad: #ff8088;                /* invalid / error                               */

  /* ---- Type ------------------------------------------------------------- */
  --display: 'Fraunces', Georgia, serif;
  --body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Geometry --------------------------------------------------------- */
  --radius:    14px;             /* default card/panel corner                     */
  --radius-sm: 9px;
  --radius-lg: 22px;
  --radius-pill: 999px;          /* the one true pill radius — stop hand-writing  */
                                 /*   999px in fifteen places                      */

  /* ---- Back-compat aliases (remove once every page is migrated) --------- */
  --r: var(--radius);            /* old terse name still resolves                 */
}

/* ============================================================================
   BASE COMPONENTS — opt-in, low-risk. A page adds the class and inherits the
   brand; it can still override anything locally. Nothing here changes layout.
   ========================================================================== */

/* ---- Wordmark / brand lockup --------------------------------------------
   The two-tone "Palimplace" device: ember first half, paper second half.
   Pages differ on the wrapper class (.wordmark / .bw / .home / .brand) and on
   the half classes (.a/.pal vs .b/.place); this matches every variant so the
   split colour is defined once. Set the family/size on your wrapper. */
.pal-mark { font-family: var(--display); font-weight: 500; letter-spacing: -.02em;
  text-decoration: none; }
.pal-mark .a, .pal-mark .pal   { color: var(--ember); }
.pal-mark .b, .pal-mark .place { color: var(--paper); }

/* ---- Eyebrow / section kicker ------------------------------------------- */
.pal-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--slate); }

/* ---- Panel surface ------------------------------------------------------ */
.pal-panel { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); }
.pal-panel:hover { border-color: var(--hair); }

/* ---- Pill buttons -------------------------------------------------------
   .pal-btn is the shared shape; pair with a modifier for colour.
   --primary: filled ember, dark ink text (the headline CTA).
   --ghost:   transparent, signal text + signal border. */
.pal-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; font-family: var(--body); font-weight: 600; font-size: 14px;
  line-height: 1; border-radius: var(--radius-pill); border: 1px solid transparent;
  padding: 10px 18px; cursor: pointer; text-decoration: none;
  transition: filter .15s, color .15s, border-color .15s, background-color .15s; }
.pal-btn--primary { background: var(--ember); color: var(--on-ember);
  border-color: var(--ember); }
.pal-btn--primary:hover { filter: brightness(1.06); }
.pal-btn--ghost { background: transparent; color: var(--signal);
  border-color: var(--signal-deep); }
.pal-btn--ghost:hover { color: var(--signal-soft); border-color: var(--signal); }

/* ---- Status chip / badge (the seam, in miniature) -----------------------
   A mono pill that marks a record attested or inferred. --att tints ember,
   --inf tints signal. Tints use color-mix so they track the locked accents
   instead of duplicating their hex by hand. */
.pal-chip { display: inline-flex; align-items: center; font-family: var(--mono);
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  padding: 2px 9px; }
.pal-chip--att { color: var(--ember);
  background: color-mix(in srgb, var(--ember) 12%, transparent);
  border-color: color-mix(in srgb, var(--ember) 40%, transparent); }
.pal-chip--inf { color: var(--signal);
  background: color-mix(in srgb, var(--signal) 12%, transparent);
  border-color: color-mix(in srgb, var(--signal) 40%, transparent); }

/* ---- The seam rule ------------------------------------------------------
   The signature ember->signal left border on the "never let the prior
   masquerade as data" callout. */
.pal-seam { font-family: var(--display); font-style: italic; color: var(--paper);
  border-left: 2px solid;
  border-image: linear-gradient(180deg, var(--ember), var(--signal)) 1;
  padding-left: 16px; }