/* ═══════════════════════════════════════════════════════════════════════
   ae-0.css — LIGHT HOPE Aesthetic Floor · AE-001 v1.1
   Owner: m558 design.x1000.ai · Built from live m556 data · 2026-06-13
   v1.1 (2026-06-15): +:focus-visible ring +.ae-skip-link (a11y · N2 from
   m229 pilot). Additive only — zero changes to existing visual values.

   THE FLOOR, NOT THE CEILING.
   Drop one <link> into base.html and a no-token template inherits hierarchy,
   breath, signal colors, and a real type system. Project identity (COMPASS
   DNA) layers on top — never replaced by the floor.

   Inject route: BSP-002 night run writes this to static/, adds one <link>.
   Gate: QG-I checks it's present + that no raw hex UI colors remain.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fonts (self-host in production; CDN for portability) ──────────────── */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@300;400;500;600&family=Noto+Serif+SC:wght@400;600&display=swap');

/* ── AE-0 · TOKENS ────────────────────────────────────────────────────── */
:root{
  /* surfaces — two bases */
  --ink:        oklch(0.16 0.012 250);
  --ink-2:      oklch(0.20 0.012 250);
  --ink-3:      oklch(0.25 0.012 250);
  --ink-line:   oklch(0.31 0.014 250);
  --cream:      oklch(0.965 0.012 85);
  --cream-2:    oklch(0.93  0.014 85);
  --cream-line: oklch(0.85  0.016 85);

  /* foreground */
  --fg:      oklch(0.96 0.008 85);
  --fg-dim:  oklch(0.79 0.012 85);
  --fg-mute: oklch(0.57 0.014 85);
  --ink-fg:      oklch(0.16 0.012 250);
  --ink-fg-dim:  oklch(0.40 0.012 250);

  /* signals — one chroma (0.16), hue rotates; magenta +0.04 for urgency */
  --signal:  oklch(0.78 0.16 152);  /* health · confirm   */
  --amber:   oklch(0.78 0.16 72);   /* attention · pending */
  --magenta: oklch(0.70 0.20 5);    /* danger · blocked    */
  --azure:   oklch(0.72 0.14 240);  /* info · link         */
  --signal-deep: oklch(0.44 0.16 152);
  --amber-deep:  oklch(0.55 0.16 72);

  /* type stacks */
  --mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --serif: 'Instrument Serif', 'Noto Serif SC', Georgia, serif;

  /* spatial */
  --r-sm: 3px; --r-md: 6px; --r-lg: 12px;
  --gap:  14px;
  --pad:  clamp(16px, 4vw, 40px);

  /* a11y (v1.1) */
  --focus: var(--azure);
}

/* ── BASE · the reset that matters ────────────────────────────────────── */
*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; }
body{
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;            /* QG-I3: body floor ≥13px            */
  line-height: 1.65;          /* QG-I3: line-height floor ≥1.5      */
  background: var(--ink);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
body.ae-paper{ background: var(--cream); color: var(--ink-fg); }

/* rule iii — one serif moment: headings + opt-in .ae-stat only */
h1, h2, h3, .ae-stat{
  font-family: var(--serif); font-weight: 400;
  letter-spacing: -0.015em; line-height: 1.1;
}
h1{ font-size: clamp(34px, 5vw, 60px); margin: 0 0 .4em; }
h2{ font-size: clamp(26px, 3.4vw, 40px); margin: 0 0 .5em; }
h3{ font-size: 22px; margin: 0 0 .4em; }
p{ max-width: 64ch; }
a{ color: var(--azure); text-decoration: none; }
a:hover{ text-decoration: underline; }
code, pre{ font-family: var(--mono); }

/* the eyebrow / label — always uppercase, always tracked */
.ae-label, .label{
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-mute);
}
.ae-paper .ae-label, .ae-paper .label{ color: var(--ink-fg-dim); }

/* ── A11Y · focus ring + skip-link (v1.1) ─────────────────────────────────
   Keyboard-only focus (mouse clicks stay clean). Works on both ink + paper
   bases: outline + offset sits outside the element on any background. The
   skip-link is off-screen until focused, then anchors top-left — pair it
   with a <main id="main"> landmark in the consuming template.            */
:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible){ outline: none; }  /* no ring on mouse/touch */

.ae-skip-link{
  position: absolute; left: 8px; top: -120px;
  z-index: 1000;
  background: var(--signal); color: var(--ink);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; padding: 8px 14px; border-radius: var(--r-md);
}
.ae-skip-link:focus{ top: 8px; }  /* instant — no motion (vestibular-safe) */

/* buttons — 3 variants, one radius */
.ae-btn{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 15px; border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .04em; border: 0; cursor: pointer; white-space: nowrap;
  background: var(--signal); color: var(--ink);
  transition: filter .15s ease;
}
.ae-btn:hover{ filter: brightness(1.08); }
.ae-btn--ghost{ background: transparent; color: var(--fg); border: 1px solid var(--ink-line); }
.ae-btn--danger{ background: var(--magenta); color: var(--ink); }
.ae-paper .ae-btn--ghost{ color: var(--ink-fg); border-color: var(--cream-line); }

/* tags — semantic only, never decorative */
.ae-tag{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10px;
  padding: 2px 8px; border-radius: var(--r-sm);
  border: 1px solid currentColor; flex: 0 0 auto; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--fg-dim);
}
.ae-tag--ok    { color: var(--signal); }
.ae-tag--warn  { color: var(--amber); }
.ae-tag--crit  { color: var(--magenta); }
.ae-tag--info  { color: var(--azure); }

/* stat card — one serif number */
.ae-card{
  background: var(--ink-2); border: 1px solid var(--ink-line);
  padding: 15px 17px; border-radius: var(--r-sm);
}
.ae-paper .ae-card{ background: #fff; border-color: var(--cream-line); }
.ae-card__eyebrow{ font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); }
.ae-card__num{
  font-family: var(--serif); font-style: italic; font-size: 34px; line-height: 1;
  color: var(--signal); margin-top: 5px;
}
.ae-card__sub{ font-size: 10px; color: var(--fg-dim); margin-top: 6px; }

/* status bar — bottom anchor on every app */
.ae-status{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 10px; color: var(--fg-mute);
  padding: 8px 16px; border-top: 1px solid var(--ink-line); background: var(--ink-2);
}
.ae-status b{ color: var(--fg-dim); font-weight: 500; }
.ae-status .ae-spacer{ margin-left: auto; }
.ae-dot{ display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); }

/* empty state — never a bare "no data" */
.ae-empty{
  border: 1px dashed var(--ink-line); border-radius: var(--r-md);
  padding: 28px; text-align: center; color: var(--fg-mute);
}
.ae-empty__title{ font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--fg-dim); }
.ae-empty__sub{ font-size: 10.5px; margin-top: 6px; }

/* data rows — the table replacement (rule: dashed dividers, tabular nums) */
.ae-rows{ border-top: 1px solid var(--ink-line); }
.ae-row{
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px;
  padding: 8px 0; border-bottom: 1px dashed var(--ink-line);
  font-size: 11px; align-items: baseline;
}
.ae-row__k{ color: var(--fg-dim); }
.ae-row__v{ color: var(--fg-mute); font-variant-numeric: tabular-nums; }

/* layout helpers */
.ae-wrap{ max-width: 1120px; margin: 0 auto; padding: 0 var(--pad); }
.ae-stack > * + *{ margin-top: var(--gap); }
.ae-grid{ display: grid; gap: var(--gap); }

/* ── MOTION · always guarded ──────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .ae-dot.is-live{ animation: ae-pulse 1.8s infinite; }
  @keyframes ae-pulse{
    0%   { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 50%, transparent); }
    70%  { box-shadow: 0 0 0 8px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}

/* ── COMPASS DNA hooks · AE-4 layers on top, never overrides the floor ──
   A project sets --signal to its own hue and the whole floor recolors
   coherently. Example (m505 Ember Crimson):
       :root[data-dna="ember"]{ --signal: oklch(0.70 0.20 5); }
   ──────────────────────────────────────────────────────────────────────── */