/* ============================================================
 * Damaros — shared design tokens + base.
 * Steel-on-black operator console DNA. Dark + light parity.
 * Type: Archivo (display) · Hanken Grotesk (body + UI). Neo-grotesque pair.
 *
 * THEME MODEL: dark only (theme-system.js pins data-theme="dark").
 * ============================================================ */

@import url("archivo.css");
@import url("hanken-grotesk.css");
@import url("nav-chrome.css");

:root {
  --fh: 'Archivo', system-ui, sans-serif;        /* display / headings / wordmark */
  --fb: 'Hanken Grotesk', system-ui, sans-serif; /* body */
  --fm: 'Hanken Grotesk', system-ui, sans-serif; /* labels / UI (tabular-nums for data) */
  /* display register — Archivo carries weight; headings semibold, wordmark bold */
  --fh-w-display: 700;
  --fh-w: 600;
  --fh-w-sub: 500;
  --fh-w-strong: 700;
  --fh-ls: -.02em;
  --fh-lh: 1.08;
  /* body register */
  --fb-w: 400;
  --fb-w-med: 500;
  --fb-w-strong: 600;
  --fb-lh: 1.6;
  /* type scale (1rem = 16px) */
  --fs-display: clamp(2.25rem, 4.8vw, 3.75rem);
  --fs-hero: clamp(2rem, 5.5vw, 3.25rem);
  --fs-xl: clamp(1.75rem, 3.2vw, 2.35rem);
  --fs-lg: clamp(1.35rem, 2.5vw, 1.875rem);
  --fs-md: clamp(1.125rem, 1.75vw, 1.375rem);
  --fs-sm: clamp(1rem, 1.15vw, 1.0625rem);
  --fs-base: 1rem;
  --fs-ui: .8125rem;
  --fs-caption: .75rem;
  --fs-micro: .6875rem;

  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: 140ms;
  --t: 220ms;
  --t-slow: 300ms;

  /* ---- DARK tokens are the default ---- */
  --bg:        #000;
  --bg-1:      #07090b;
  --bg-2:      #0b1016;
  --panel:     linear-gradient(180deg, rgba(11,14,20,.82), rgba(7,10,15,.62));
  --panel-solid:#0a0e14;

  --fg:        #E8E8E8;
  --fg-2:      rgba(232,232,232,.72);
  --fg-3:      rgba(232,232,232,.46);

  --accent:    #7B96B2;
  --accent-2:  #A9C0D6;
  --accent-bright:#8fbfff;

  --pass:   #4ADE80;
  --review: #FACC15;
  --fail:   #FB7185;
  --locked: #60A5FA;
  --luna:   #C084FC;   /* provenance / AI origin */

  --bd:      rgba(123,150,178,.22);
  --bd-soft: rgba(123,150,178,.12);
  --bd-strong:rgba(123,150,178,.4);
  --chip-bg: rgba(123,150,178,.06);
  --glass:   rgba(0,0,0,.36);

  --grid-line: rgba(123,150,178,.05);
  --scan: rgba(123,150,178,.018);
  --shadow-panel: 0 0 0 1px rgba(4,8,14,.5), 0 18px 48px rgba(0,0,0,.34);
  --glow: 0 0 42px rgba(123,150,178,.14);

  --cta-shine: rgba(255,255,255,.16);
  --cta-shine-strong: rgba(255,255,255,.35);
  --cta-inset-dark: rgba(0,0,0,.14);
  --cta-shine-opacity: .45;
  --cta-grain-opacity: .25;
  --cta-color: var(--fg);
  --cta-color-hover: #0a0e14;
  --cta-border: color-mix(in srgb, var(--accent-2) 38%, transparent);
  --cta-border-hover: var(--accent);
  --cta-bg: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 16%, transparent) 0%, color-mix(in srgb, var(--glass) 92%, transparent) 42%, color-mix(in srgb, var(--accent) 10%, transparent) 100%);
  --cta-bg-hover: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 88%, #fff) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 92%, #000) 100%);
  --cta-shadow: inset 0 1px 0 var(--cta-shine), inset 0 -1px 0 var(--cta-inset-dark), 0 8px 28px color-mix(in srgb, var(--accent) 10%, transparent);
  --cta-shadow-hover: inset 0 1px 0 var(--cta-shine-strong), var(--glow), 0 10px 32px color-mix(in srgb, var(--accent) 28%, transparent);

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scrollbar-color: color-mix(in srgb, var(--accent) 42%, var(--bg-2)) var(--bg-1); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fb);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t-slow) var(--ease), color var(--t-slow) var(--ease);
}
a { color: inherit; text-decoration: none; }

/* ---- type registers ---- */
.eyebrow {
  font-family: var(--fm);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.mono { font-family: var(--fm); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
h1,h2,h3 { font-family: var(--fh); font-weight: var(--fh-w); letter-spacing: var(--fh-ls); line-height: var(--fh-lh); margin: 0; }
h1 { font-size: var(--fs-xl); }
/* doc page heroes — one line, fluid scale; no ch-width caps */
.d-title, .a-title {
  max-width: none;
  white-space: nowrap;
  text-wrap: nowrap;
  line-height: 1.05;
  letter-spacing: -.025em;
  font-size: clamp(1.05rem, 0.35rem + 2.4vw, 2.35rem);
}
.a-title {
  font-size: clamp(0.82rem, 0.38rem + 2.65vw, 2.35rem);
}
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); }
p { line-height: var(--fb-lh); }
strong, b { font-weight: var(--fb-w-strong); }

/* status chip primitive */
.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--fm); font-size: .58rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; padding: .26rem .56rem; border-radius: 3px;
  border: 1px solid var(--bd); background: var(--chip-bg); color: var(--accent-2);
}
.chip.pass   { color: var(--pass);   border-color: color-mix(in srgb, var(--pass) 42%, transparent);   background: color-mix(in srgb, var(--pass) 10%, transparent); }
.chip.review { color: var(--review); border-color: color-mix(in srgb, var(--review) 42%, transparent); background: color-mix(in srgb, var(--review) 10%, transparent); }
.chip.fail   { color: var(--fail);   border-color: color-mix(in srgb, var(--fail) 42%, transparent);   background: color-mix(in srgb, var(--fail) 10%, transparent); }
.chip.locked { color: var(--locked); border-color: color-mix(in srgb, var(--locked) 42%, transparent); background: color-mix(in srgb, var(--locked) 10%, transparent); }
.chip.luna   { color: var(--luna);   border-color: color-mix(in srgb, var(--luna) 42%, transparent);   background: color-mix(in srgb, var(--luna) 10%, transparent); }

/* ---- metallic glass CTA ---- */
.dmx-cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--fm); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-radius: 8px; color: var(--cta-color); text-decoration: none;
  border: 1px solid var(--cta-border);
  background: var(--cta-bg);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: var(--cta-shadow);
  transition: border-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease);
  overflow: hidden;
}
.dmx-cta::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(112deg, transparent 28%, var(--cta-shine) 50%, transparent 66%);
  opacity: var(--cta-shine-opacity);
}
.dmx-cta::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(-18deg, transparent, transparent 3px, color-mix(in srgb, var(--accent-2) 5%, transparent) 3px, color-mix(in srgb, var(--accent-2) 5%, transparent) 4px);
  opacity: var(--cta-grain-opacity);
}
.dmx-cta > * { position: relative; z-index: 1; }
.dmx-cta--sm { font-size: var(--fs-caption); padding: .82rem 1.3rem; }
.dmx-cta--md { font-size: var(--fs-ui); padding: 1rem 1.7rem; margin-top: 2rem; }
.dmx-cta:hover {
  border-color: var(--cta-border-hover);
  color: var(--cta-color-hover);
  transform: translateY(-1px);
  background: var(--cta-bg-hover);
  box-shadow: var(--cta-shadow-hover);
}
.dmx-cta:hover::before { opacity: calc(var(--cta-shine-opacity) + .18); }
.dmx-cta:active { transform: translateY(0); }
.dmx-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: 3px;
}

/* surface texture overlay — scanlines + vignette, fixed */
.dmx-texture { position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 2px, var(--scan) 2px, var(--scan) 4px),
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}