/*
 * Deadeye base: reset, typography, utilities, layout primitives and the app shell.
 * Uses only var(--dl-*) tokens from tokens.css.
 */
/* ======================================================================
   Base
   ====================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background-color: var(--dl-bg);
  background-image: var(--dl-tex-smoke);
  background-attachment: fixed;
  color: var(--dl-text-2);
  font-family: var(--dl-font-body);
  font-size: var(--dl-text-md);
  line-height: var(--dl-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; color: var(--dl-text); font-weight: var(--dl-weight-semibold); line-height: var(--dl-leading-tight); }
h1 { font-family: var(--dl-font-display); font-size: var(--dl-text-4xl); letter-spacing: var(--dl-track-display); font-weight: 700; }
h2 { font-family: var(--dl-font-heading); font-size: var(--dl-text-xl); letter-spacing: var(--dl-track-heading); text-transform: uppercase; font-weight: 500; }
h3 { font-family: var(--dl-font-heading); font-size: var(--dl-text-lg); letter-spacing: var(--dl-track-heading); text-transform: uppercase; font-weight: 500; }
h4 { font-family: var(--dl-font-label); font-size: var(--dl-text-sm); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
p { margin: 0 0 var(--dl-space-3); }
a { color: var(--dl-brass-bright); text-decoration-color: var(--dl-line-brass); text-underline-offset: 3px; transition: filter var(--dl-dur-fast) var(--dl-ease); }
a:hover { filter: brightness(1.25); }
small { font-size: var(--dl-text-xs); color: var(--dl-text-muted); }
code, kbd { font-family: var(--dl-font-mono); font-size: 0.92em; background: var(--dl-surface-sunken); border: 1px solid var(--dl-line); border-radius: var(--dl-radius-xs); padding: 0 4px; color: var(--dl-brass-light); }
hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--dl-line-brass), transparent); margin: var(--dl-space-6) 0; }
::selection { background: color-mix(in srgb, var(--dl-brass-bright) 35%, transparent); color: var(--dl-text); }
:focus-visible { outline: 2px solid var(--dl-focus); outline-offset: 2px; }
button, input, select { font: inherit; color: inherit; }

/* ======================================================================
   Utilities
   ====================================================================== */
.dl-num { font-family: var(--dl-font-numeric); font-variant-numeric: var(--dl-numeric); font-feature-settings: "tnum" 1, "lnum" 1; letter-spacing: 0; }
.dl-label { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); }
.dl-eyebrow { font-family: var(--dl-font-label); font-size: var(--dl-text-xs); font-weight: var(--dl-weight-semibold); letter-spacing: var(--dl-track-label-wide); text-transform: uppercase; color: var(--dl-brass); }
.dl-display { font-family: var(--dl-font-display); font-size: var(--dl-text-5xl); font-weight: 900; letter-spacing: var(--dl-track-display); text-transform: uppercase; color: var(--dl-text); line-height: 1; text-shadow: var(--dl-shadow-text); }
.dl-muted { color: var(--dl-text-muted); }
.dl-faint { color: var(--dl-text-faint); }
.dl-text-souls { color: var(--dl-souls); }
.dl-text-weapon { color: var(--dl-weapon); }
.dl-text-vitality { color: var(--dl-vitality); }
.dl-text-spirit { color: var(--dl-spirit); }
.dl-text-amber { color: var(--dl-amber); }
.dl-text-sapphire { color: var(--dl-sapphire-bright); }
.dl-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dl-stack { display: flex; flex-direction: column; gap: var(--dl-stack-gap, var(--dl-space-3)); }
.dl-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dl-cluster-gap, var(--dl-space-2)); }
.dl-grid { display: grid; gap: var(--dl-grid-gap, var(--dl-space-4)); grid-template-columns: repeat(auto-fill, minmax(var(--dl-grid-min, 220px), 1fr)); }
.dl-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; color: inherit; }
.dl-icon--sm { width: 1em; height: 1em; vertical-align: -0.15em; }
.dl-icon--lg { width: 1.75em; height: 1.75em; }

/* Grain overlay: use on flavour surfaces (headers, hero banners), NOT on dense tables. */
.dl-grain { position: relative; isolation: isolate; }
.dl-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background-image: var(--dl-tex-grain); background-size: 160px 160px;
  opacity: 0.07; mix-blend-mode: overlay; border-radius: inherit;
}
.dl-smoke { background-image: var(--dl-tex-smoke); }
.dl-sunburst { background-image: var(--dl-tex-sunburst); }

/* ======================================================================
   App shell & nav
   ====================================================================== */
.dl-app { min-height: 100vh; display: grid; grid-template-rows: var(--dl-nav-height) 1fr; }
.dl-app--sidebar { grid-template-columns: var(--dl-sidebar-width) 1fr; grid-template-rows: var(--dl-nav-height) 1fr; }
.dl-app--sidebar > .dl-nav { grid-column: 1 / -1; }
.dl-main { padding: var(--dl-space-6); max-width: var(--dl-content-max); width: 100%; margin: 0 auto; }
.dl-sidebar { background: var(--dl-bg-ink); border-right: 1px solid var(--dl-line); padding: var(--dl-space-4); }

.dl-nav {
  position: sticky; top: 0; z-index: var(--dl-z-nav);
  display: flex; align-items: center; gap: var(--dl-space-6);
  height: var(--dl-nav-height); padding: 0 var(--dl-space-6);
  background: linear-gradient(180deg, var(--dl-nav-top) 0%, var(--dl-nav-bottom) 100%);
  border-bottom: 1px solid var(--dl-line);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--dl-brass) 18%, transparent), 0 8px 24px color-mix(in srgb, var(--dl-black) 40%, transparent);
}
.dl-nav__brand { display: flex; align-items: center; gap: var(--dl-space-2); font-family: var(--dl-font-display); font-weight: 900; font-size: var(--dl-text-lg); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dl-text); text-decoration: none; }
.dl-nav__brand-mark { width: 26px; height: 26px; color: var(--dl-brass); }
.dl-nav__items { display: flex; align-items: stretch; height: 100%; gap: var(--dl-space-1); margin: 0; padding: 0; list-style: none; }
.dl-nav__items > li { display: flex; }
.dl-app [id] { scroll-margin-top: calc(var(--dl-nav-height) + var(--dl-space-4)); }
.dl-nav__item {
  position: relative; display: flex; align-items: center; gap: var(--dl-space-2); padding: 0 var(--dl-space-3);
  font-family: var(--dl-font-label); font-size: var(--dl-text-sm); font-weight: var(--dl-weight-semibold);
  letter-spacing: var(--dl-track-label); text-transform: uppercase; color: var(--dl-text-muted); text-decoration: none;
  transition: color var(--dl-dur-fast) var(--dl-ease), filter var(--dl-dur-fast) var(--dl-ease);
}
.dl-nav__item:hover { color: var(--dl-text); filter: none; }
.dl-nav__item[aria-current="page"] { color: var(--dl-text); }
.dl-nav__item[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--dl-space-3); right: var(--dl-space-3); bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--dl-brass-bright), transparent);
}
.dl-nav__spacer { flex: 1; }

/* ======================================================================
   Layout primitives
   ====================================================================== */
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
ul.dl-plain, ol.dl-plain { list-style: none; margin: 0; padding: 0; }
.dl-row { display: flex; align-items: center; gap: var(--dl-row-gap, var(--dl-space-3)); min-width: 0; }
.dl-row--between { justify-content: space-between; }
.dl-row--end { align-items: flex-end; }
.dl-spacer { flex: 1; }
.dl-split { display: grid; gap: var(--dl-space-4); grid-template-columns: minmax(0, var(--dl-split-a, 1fr)) minmax(0, var(--dl-split-b, 1fr)); align-items: start; }
.dl-cols { display: grid; gap: var(--dl-space-4); grid-template-columns: repeat(var(--dl-cols, 3), minmax(0, 1fr)); }
.dl-nowrap { white-space: nowrap; }
.dl-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1100px) {
  .dl-split, .dl-cols { grid-template-columns: minmax(0, 1fr); }
}

.dl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }