/* ============================================================
   SUDX — design system
   Derived from the SUDX Identity Sheet (DOC No. SDX-IS-001 · v1.0).
   Two-voice system: JetBrains Mono (display/UI/data) + Instrument Serif
   (editorial). Quadrant mark. Ink / Bone / Brass / Steel.
   ============================================================ */

:root {
  /* Palette */
  --ink:       #0E1A2B;   /* deep navy — carries identity / type */
  --bone:      #ECE6D8;   /* surface */
  --brass:     #A6814F;   /* accent — reserved for live / active states */
  --steel:     #5D6A78;   /* secondary — lines, metadata, secondary type */
  --paper:     #F4EFE4;   /* lighter cream — sub-panels */

  --line:        rgba(14, 26, 43, 0.18);
  --line-soft:   rgba(14, 26, 43, 0.10);

  /* On-ink variants */
  --bone-strong: rgba(236, 230, 216, 0.92);
  --bone-muted:  rgba(236, 230, 216, 0.62);
  --bone-faint:  rgba(236, 230, 216, 0.40);
  --line-dk:     rgba(236, 230, 216, 0.18);
  --line-dk-soft: rgba(236, 230, 216, 0.10);

  /* Type */
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  /* Layout */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 4px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bone); color: var(--ink); }

body {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* ─── type primitives ─── */
.serif { font-family: var(--serif); }
.mono  { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}
.eyebrow.brass { color: var(--brass); opacity: 1; }
.eyebrow.dim   { opacity: 0.5; }

.kicker { /* mono label, slightly larger */
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* ─── wordmark ─── */
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 0.9;
  color: inherit;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}
.wordmark .x { font-size: 0.66em; }

/* ─── quadrant mark ─── */
/* Wedges follow currentColor; diamond core is always brass. */
.qmark { display: block; flex: none; }

/* ─── lockup ─── */
.lockup { display: inline-flex; align-items: center; gap: 0.7em; }

/* ─── layout helpers ─── */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* corner ticks for framed stages */
.framed { position: relative; }
.tick { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.tick::before, .tick::after { content: ""; position: absolute; background: currentColor; opacity: 0.55; }
.tick::before { height: 1px; width: 14px; }
.tick::after  { width: 1px; height: 14px; }
.tick.tl { top: 12px; left: 12px; } .tick.tl::before,.tick.tl::after { top: 0; left: 0; }
.tick.tr { top: 12px; right: 12px; } .tick.tr::before { right: 0; top: 0; } .tick.tr::after { right: 0; top: 0; }
.tick.bl { bottom: 12px; left: 12px; } .tick.bl::before { bottom: 0; left: 0; } .tick.bl::after { bottom: 0; left: 0; }
.tick.br { bottom: 12px; right: 12px; } .tick.br::before { right: 0; bottom: 0; } .tick.br::after { right: 0; bottom: 0; }

/* ─── buttons ─── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-ink { background: var(--ink); color: var(--bone); }
.btn-ink:hover { background: #1a2c44; }

.btn-brass { background: var(--brass); color: var(--ink); }
.btn-brass:hover { background: #b88f57; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink); }

/* on dark surfaces */
.on-ink { color: var(--bone); }
.on-ink .btn-ghost { color: var(--bone); border-color: var(--line-dk); }
.on-ink .btn-ghost:hover { border-color: var(--bone); }
.on-ink .btn-bone { background: var(--bone); color: var(--ink); }
.on-ink .btn-bone:hover { background: #f4efe4; }

/* ─── reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}