/* Archangel walkthrough — design tokens & base.
 *
 * Shares its visual identity with the Tauri desktop UI; see
 * ../ArchAngel/ui/src/styles/theme.css. Fonts use the same local-first
 * system stack (no Google Fonts fetch) and the brand sigil renders the
 * same SVG (A + halo) the Tauri header uses, via mask-image. */

:root {
  /* ink — aligned with Tauri's [data-theme="dark"] surface ladder */
  --ink-0: #0a0c10;
  --ink-1: #0f1217;
  --ink-2: #14181f;
  --ink-3: #1b212a;
  --ink-4: #262d36;
  --ink-5: #3a424d;

  /* parchment */
  --paper-0: #f4ecd9;
  --paper-1: #ece5d3;
  --paper-2: #d8d0bc;
  --paper-3: #a89f8a;
  --paper-4: #7a7263;
  --paper-5: #524b3f;

  /* accents — must match Tauri's --accent (dark theme) */
  --halo:        #d4a85a;    /* warm gold — brand/pro */
  --halo-soft:   rgba(212, 168, 90, 0.12);
  --halo-deep:   #b08a3f;
  --oxide:       #d0573c;    /* danger / tier X */
  --oxide-deep:  #9a3a23;
  --amber:       #d4a85a;    /* tier R warn */
  --burnt:       #c97442;    /* tier H */
  --sage:        #8aa775;    /* tier S safe */
  --sky:         #6f95b8;    /* info / link */

  /* border lines */
  --line:        rgba(236, 229, 211, 0.08);
  --line-2:      rgba(236, 229, 211, 0.14);
  --line-3:      rgba(236, 229, 211, 0.22);

  /* Font stack — mirrors the Tauri UI's theme.css for visual parity. */
  --font-sans:    ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  "Inter", system-ui, Roboto, "Helvetica Neue", sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code",
                  Menlo, Consolas, monospace;
  --font-display: "Iowan Old Style", "Apple Garamond", Cambria, Georgia, serif;
  /* Legacy alias — the components reference `--font-serif` widely. */
  --font-serif:   var(--font-display);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-1);
  color: var(--paper-1);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

body {
  background:
    radial-gradient(1200px 600px at 78% -8%, rgba(212, 168, 90, 0.07), transparent 60%),
    radial-gradient(900px 700px at -5% 12%, rgba(208, 87, 60, 0.04), transparent 65%),
    var(--ink-1);
  min-height: 100vh;
}

::selection { background: var(--halo); color: var(--ink-0); }

a { color: var(--paper-0); text-decoration: none; }
a:hover { color: var(--halo); }

/* ----- Typography ----- */

.serif    { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.mono     { font-family: var(--font-mono); font-feature-settings: "calt" 0; }
.eyebrow  { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--paper-3); font-weight: 500; }
.eyebrow .dot { display: inline-block; width: 6px; height: 6px; background: var(--halo); border-radius: 50%; margin-right: 10px; vertical-align: 1px; }

h1, h2, h3, h4 { font-weight: 400; letter-spacing: -0.02em; margin: 0; color: var(--paper-0); }

.h-display { font-family: var(--font-serif); font-size: clamp(48px, 7vw, 96px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.h-section { font-family: var(--font-serif); font-size: clamp(36px, 4.6vw, 56px); line-height: 1.05; letter-spacing: -0.022em; text-wrap: balance; }
.h-sub     { font-family: var(--font-serif); font-size: clamp(24px, 2.3vw, 32px); line-height: 1.15; }

.italic { font-style: italic; }
.muted  { color: var(--paper-3); }
.dim    { color: var(--paper-4); }
.faint  { color: var(--paper-5); }

/* ----- Layout ----- */

.shell { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.shell-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }

section { padding: 120px 0; position: relative; }
section + section { border-top: 1px solid var(--line); }

.section-head { margin-bottom: 56px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head .lede { color: var(--paper-3); max-width: 64ch; font-size: 17px; margin-top: 14px; }

/* ----- Top nav ----- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(13,12,10,0.85) 0%, rgba(13,12,10,0.55) 100%);
  border-bottom: 1px solid var(--line);
}
.topbar-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.topbar nav { display: flex; gap: 28px; }
.topbar nav a { color: var(--paper-2); font-size: 13px; }
.topbar nav a:hover { color: var(--paper-0); }
.topbar .cta { display: flex; gap: 10px; align-items: center; }

/* ----- Brand mark -----
 *
 * Identical glyph to the Tauri UI's .aa-sigil. The "A" textnode that
 * legacy markup still ships inside the .sigil span is hidden via
 * font-size:0 and replaced visually by an SVG (A + halo ellipse) drawn
 * with mask-image, so the same data: URL drives both apps with no
 * markup changes required on the legal/* and docs/* pages. */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--paper-0);
  letter-spacing: -0.01em;
}
.brand .sigil {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--halo);
  border-radius: 50%;
  background: var(--halo-soft);
  color: var(--halo);
  position: relative;
  /* hide the legacy "A" textnode without altering markup */
  font-size: 0;
}
.brand .sigil::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='4.6' rx='4.4' ry='1.3'/%3E%3Cpath d='M5 20 L12 8 L19 20'/%3E%3Cpath d='M8.4 16 L15.6 16'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='4.6' rx='4.4' ry='1.3'/%3E%3Cpath d='M5 20 L12 8 L19 20'/%3E%3Cpath d='M8.4 16 L15.6 16'/%3E%3C/svg%3E") no-repeat center / contain;
}
.brand b { font-weight: 600; color: var(--halo); }

/* ----- Buttons ----- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: all 120ms ease; background: transparent;
  color: inherit; line-height: 1;
}
.btn-primary { background: var(--paper-0); color: var(--ink-0); border-color: var(--paper-0); }
.btn-primary:hover { background: var(--halo); border-color: var(--halo); color: var(--ink-0); }
.btn-ghost { color: var(--paper-1); border-color: var(--line-3); }
.btn-ghost:hover { border-color: var(--paper-2); color: var(--paper-0); }
.btn-danger { background: var(--oxide); color: var(--ink-0); border-color: var(--oxide); }
.btn-danger:disabled { background: var(--ink-3); color: var(--paper-4); border-color: var(--line-2); cursor: not-allowed; }
.btn .kbd { font-family: var(--font-mono); font-size: 11px; opacity: 0.6; }

/* ----- Pills / chips ----- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 4px 9px; border-radius: 4px;
  border: 1px solid var(--line-2);
  color: var(--paper-2); background: rgba(236,229,211,0.02);
  letter-spacing: 0.04em;
}
.chip-tier-S { color: var(--sage);  border-color: rgba(138,167,117,0.35); background: rgba(138,167,117,0.06); }
.chip-tier-R { color: var(--amber); border-color: rgba(212,168,90,0.35);  background: rgba(212,168,90,0.06); }
.chip-tier-H { color: var(--burnt); border-color: rgba(201,116,66,0.40);  background: rgba(201,116,66,0.07); }
.chip-tier-X { color: var(--oxide); border-color: rgba(208,87,60,0.45);   background: rgba(208,87,60,0.08); }
.chip-ai     { color: var(--halo);  border-color: rgba(212,168,90,0.4); background: rgba(212,168,90,0.06); }
.chip-pro    { color: var(--ink-0); background: var(--halo); border-color: var(--halo); }

/* ----- Cards ----- */

.card {
  background: linear-gradient(180deg, rgba(236,229,211,0.025) 0%, rgba(236,229,211,0.012) 100%);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  padding: 28px;
}
.card-tight { padding: 20px; border-radius: 12px; }

/* ----- Terminal frame ----- */

.term {
  background: var(--ink-0);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-1);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4) inset;
}
.term-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--ink-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.04em;
}
.term-bar .dots { display: flex; gap: 6px; }
.term-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-4); }
.term-bar .dot.r { background: #5d4540; }
.term-bar .dot.y { background: #5d4f33; }
.term-bar .dot.g { background: #3d5a3a; }
.term-bar .title { margin-left: auto; }
.term-body { padding: 18px 20px; min-height: 360px; }
.term-line { white-space: pre-wrap; }
.term .prompt { color: var(--sage); }
.term .ai     { color: var(--halo); }
.term .warn   { color: var(--amber); }
.term .danger { color: var(--oxide); }
.term .safe   { color: var(--sage); }
.term .dim    { color: var(--paper-4); }
.term .label  { color: var(--paper-3); }
.term .cursor { display: inline-block; width: 8px; height: 14px; background: var(--paper-1); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ----- Layers diagram ----- */
.stripe-placeholder {
  background: repeating-linear-gradient(
    135deg,
    rgba(236,229,211,0.04) 0 8px,
    rgba(236,229,211,0.01) 8px 16px
  );
  border: 1px dashed var(--line-3);
  color: var(--paper-4);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
}

/* ----- Footer ----- */
footer.site-foot {
  padding: 64px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--paper-3);
  font-size: 13px;
}

/* misc utility */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.grow { flex: 1; }
.text-center { text-align: center; }
.wrap { flex-wrap: wrap; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }

/* divider rule */
.rule { height: 1px; background: var(--line); width: 100%; }

/* small helpers */
.kbd {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid var(--line-3); color: var(--paper-2);
  background: var(--ink-2);
}

/* scroll-friendly anchor offset */
.anchor { scroll-margin-top: 80px; }

/* responsive */
@media (max-width: 860px) {
  section { padding: 80px 0; }
  .topbar nav { display: none; }
  .shell, .shell-narrow { padding: 0 20px; }
}