/* ============================================================
   MUIRWAVE PREDICTION — CANONICAL DESIGN SYSTEM
   ------------------------------------------------------------
   The single source of truth for the MuirWave visual language.
   Copy this file into new work and build on top of the tokens
   and component classes defined here — do not redefine colors,
   type, or component shells ad hoc.

   Audit values (v0.4 → standard) baked in:
     • --fog raised to #94A4B0 for WCAG-AA body contrast
     • Tracking capped at 0.28em for eyebrows / taglines
     • Inter 600 is the small-heading face; Cinzel is display-only
     • Thin brass scrollbar instead of fully-hidden chrome
   ============================================================ */

:root {
  /* ---- Depths · backgrounds (deepest → highest surface) ---- */
  --abyss:      #050A12;   /* page floor */
  --ink:        #0B1321;   /* default surface / card base */
  --hull:       #132335;   /* raised surface */
  --gunmetal:   #1B2A3F;   /* control surface */
  --steel:      #2A3F58;   /* hairlines on dark devices */

  /* ---- Brass · the brand metal (lines, marks, primary action) ---- */
  --brass-low:  #6E5735;   /* disabled / deep */
  --brass:      #B08D57;   /* default brass — borders, marks */
  --brass-hi:   #D0A850;   /* highlight — titles, primary fill */

  /* ---- Squall · the live cyan (interaction, signal, "now") ---- */
  --squall-dim: #2B7F8A;
  --squall:     #4FD1E0;

  /* ---- Text ---- */
  --ice:        #E6F0F4;   /* headings / emphasis on dark */
  --foam:       #C6E1EA;   /* body copy */
  --fog:        #94A4B0;   /* meta / captions — AA on abyss (~4.6:1) */
  --fog-legacy: #7A8B97;   /* DEPRECATED — fails AA below 18px */

  /* ---- Ray classification (acoustic path types — semantic) ---- */
  --ray-direct:  #4FD1E0;  /* direct path */
  --ray-bottom:  #F0B84A;  /* bottom-bounce */
  --ray-surface: #E07AD6;  /* surface-duct */
  --ray-cz:      #8AF0C8;  /* convergence zone */

  /* ---- Status ---- */
  --ok:     #6BD98A;
  --warn:   #F0B84A;
  --danger: #E05A5A;

  /* ---- Hairline / border tints (brass at low alpha) ---- */
  --line:        rgba(176,141,87,0.18);
  --line-strong: rgba(176,141,87,0.30);
  --line-dash:   rgba(176,141,87,0.18);

  /* ---- Type families ---- */
  --font-display: 'Cinzel', 'Times New Roman', serif;  /* DISPLAY ONLY */
  --font-body:    'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Tracking scale (audit-capped) ---- */
  --track-body:  0.01em;   /* running text, small headings */
  --track-mono:  0.04em;   /* numerics */
  --track-label: 0.18em;   /* mono labels, chips */
  --track-caps:  0.24em;   /* eyebrows, nav, taglines (was 0.45 — deprecated) */
  --track-caps-wide: 0.28em; /* ceiling — never exceed for running caps */

  /* ---- Radius ---- */
  --r-sm: 3px;    /* chips, buttons, inputs */
  --r-md: 6px;    /* cards, tiles, tables */
  --r-lg: 12px;   /* feature cards, device-adjacent panels */
  --r-xl: 16px;   /* bridge / hero panels */

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-14: 56px; --sp-20: 80px; --sp-28: 112px; --sp-36: 140px;

  /* ---- Elevation ---- */
  --shadow-card: 0 24px 60px rgba(0,0,0,0.45);
  --shadow-pop:  0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(208,168,80,0.15);
  --glow-brass:  0 0 30px rgba(208,168,80,0.25);
  --glow-squall: 0 0 8px var(--squall);

  /* ---- Signature gradients ---- */
  --grad-storm: radial-gradient(ellipse 1100px 700px at 12% 0%, rgba(79,209,224,0.08), transparent 60%),
                radial-gradient(ellipse 900px 1200px at 92% 100%, rgba(176,141,87,0.07), transparent 60%),
                linear-gradient(180deg, #050810 0%, #0a1018 60%, #050810 100%);
  --grad-surface: linear-gradient(180deg, rgba(11,19,33,0.7), rgba(5,10,18,0.4));
  --grad-brass:   linear-gradient(180deg, var(--brass-hi), var(--brass));
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  color: var(--foam);
  background: var(--abyss);
  -webkit-font-smoothing: antialiased;
}

/* Thin brass scrollbar (audit T-03: affordance restored, vibe kept) */
* { scrollbar-width: thin; scrollbar-color: rgba(176,141,87,0.35) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(176,141,87,0.32);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(208,168,80,0.5); background-clip: content-box; }

/* ============================================================
   TYPE TIERS
   Cinzel = DISPLAY ONLY (brand mark, hero, section/chapter
   titles, pull-quotes). Inter 600 carries small headings.
   ============================================================ */
.t-display {
  font-family: var(--font-display); font-weight: 700;
  color: var(--brass-hi); letter-spacing: 0.02em; line-height: 1;
  text-shadow: var(--glow-brass);
}
.t-title {            /* big section/chapter title */
  font-family: var(--font-display); font-weight: 600;
  color: var(--ice); letter-spacing: 0.015em; line-height: 1.05;
}
.t-heading {          /* small heading — Inter 600, NOT Cinzel */
  font-family: var(--font-body); font-weight: 600;
  color: var(--ice); letter-spacing: var(--track-body); line-height: 1.3;
}
.t-eyebrow {
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase;
  color: var(--brass);
}
.t-body { font-family: var(--font-body); color: var(--foam); line-height: 1.7; }
.t-meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--track-label); color: var(--fog); text-transform: uppercase;
}
.mono  { font-family: var(--font-mono); letter-spacing: var(--track-mono); }
.brass { color: var(--brass-hi); }
.squall{ color: var(--squall); }

/* Eyebrow with flanking rules */
.eyebrow-rule { display: inline-flex; align-items: center; gap: 14px; }
.eyebrow-rule::before, .eyebrow-rule::after {
  content: ""; height: 1px; width: 38px;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  text-decoration: none; padding: 13px 26px; border-radius: var(--r-sm);
  cursor: pointer; transition: all 0.2s;
  display: inline-flex; align-items: center; gap: 10px;
}
.btn-primary {
  background: var(--grad-brass); color: var(--abyss);
  border: 1px solid var(--brass-hi);
  box-shadow: 0 8px 24px rgba(208,168,80,0.22);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 38px rgba(208,168,80,0.38); }
.btn-ghost {
  background: transparent; color: var(--foam);
  border: 1px solid rgba(198,225,234,0.3);
}
.btn-ghost:hover { color: var(--squall); border-color: var(--squall); background: rgba(79,209,224,0.06); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ============================================================
   TILES & CAPABILITY CARDS
   ============================================================ */
.tile {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  background: var(--grad-surface);
  backdrop-filter: blur(6px);
  position: relative; overflow: hidden;
  transition: transform 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.tile:hover { transform: translateY(-4px); border-color: var(--brass); box-shadow: var(--shadow-card); }
.tile::after {            /* corner sonar glow */
  content: ""; position: absolute; top: 0; right: 0; width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(79,209,224,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.tile-num { font-family: var(--font-mono); font-size: 10px; color: var(--brass); letter-spacing: var(--track-label); }
.tile-title { font-family: var(--font-body); font-weight: 600; font-size: 19px; color: var(--ice); margin: 14px 0 12px; letter-spacing: var(--track-body); }
.tile-body { font-size: 14px; color: var(--foam); line-height: 1.6; }

/* Compact capability tile (console density) */
.cap {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 18px;
  background: linear-gradient(180deg, rgba(11,19,33,0.6), rgba(5,10,18,0.3));
  transition: border-color 0.25s, transform 0.25s;
}
.cap:hover { border-color: var(--brass); transform: translateY(-2px); }
.cap-num { font-family: var(--font-mono); font-size: 10px; color: var(--brass); letter-spacing: var(--track-caps); }
.cap-title { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--ice); margin: 6px 0 8px; }
.cap-body { font-size: 13px; color: var(--foam); line-height: 1.5; }
.cap-meta { margin-top: 14px; font-family: var(--font-mono); font-size: 10px; color: var(--brass-hi); letter-spacing: 0.12em; }

/* ============================================================
   CHIPS · STATUS PILLS · SEVERITY BADGES
   ============================================================ */
.chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-label);
  color: var(--foam);
  border: 1px solid var(--line-strong);
  padding: 5px 10px; border-radius: var(--r-sm);
  background: rgba(11,19,33,0.7);
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.brass { color: var(--brass-hi); border-color: var(--brass); }
.chip.ok    { color: var(--ok); border-color: rgba(107,217,138,0.4); }
.chip.live  { color: var(--squall); border-color: rgba(79,209,224,0.5); }
.chip.live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--squall); box-shadow: var(--glow-squall);
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Severity badge (audit / findings) */
.sev {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em;
  padding: 4px 9px; border-radius: var(--r-sm); text-transform: uppercase;
}
.sev.high { color: var(--danger); border: 1px solid rgba(224,90,90,0.45); background: rgba(224,90,90,0.08); }
.sev.med  { color: var(--warn);   border: 1px solid rgba(240,184,74,0.45); background: rgba(240,184,74,0.08); }
.sev.low  { color: var(--squall); border: 1px solid rgba(79,209,224,0.45); background: rgba(79,209,224,0.06); }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1100px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }