/* aw.css — Advisory Wizard shared design system (Conservative refresh).
 *
 * The single source of truth for design tokens and base component styles. Pages already used
 * the same values inline on ~23 copies; this centralises them so a change is made once. It is
 * intentionally NON-DISRUPTIVE: it defines tokens + a light base layer + reusable `aw-*`
 * component classes, and does not restyle existing page markup on its own. Link it in <head>
 * BEFORE a page's own <style> so the page can still override during migration:
 *     <link rel="stylesheet" href="aw.css">
 *
 * Brand hues are unchanged (indigo #4338CA / violet #6D28D9 / deep #1E1B4B). What the refresh
 * adds: a considered type scale, neutrals with a slight indigo bias, consistent radius and
 * softer elevation, semantic status colours, and an `aw-ic` line-icon convention.
 */

/* Self-hosted Inter (variable, Latin) — served same-origin so it satisfies the font-src 'self'
 * CSP. One file covers weights 100–900. SIL Open Font License. font-display:swap paints text
 * immediately in the system fallback, then swaps to Inter when it loads (no invisible-text flash). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-var.woff2') format('woff2');
}

:root {
  /* Brand */
  --aw-brand: #4338CA;
  --aw-brand-deep: #1E1B4B;
  --aw-brand-strong: #3730A3;
  --aw-violet: #6D28D9;          /* PRIMARY ACTION colour — buttons, chips, active tab, inline links */
  --aw-violet-strong: #5B21B6;   /* primary-action hover (was hardcoded on 11 pages) */
  --aw-violet-tint: #f3ebfd;     /* pale violet wash behind ghost/outline actions */
  --aw-brand-tint: #eef1fb;      /* pale indigo wash for icon tiles, hovers, selected rows */

  /* Neutrals — biased a touch toward indigo so they read as chosen, not default grey */
  --aw-ink: #1a1d2e;             /* primary text */
  --aw-slate: #565c72;           /* secondary text */
  /* Tertiary text. Darkened from #8a90a6 (E6): that measured 3.17:1 on white and 2.92:1 on
     the canvas — below the 4.5:1 WCAG AA floor for body text, and this token carries
     captions, table meta and helper text all over the app. #676d85 is the LIGHTEST value in
     the same indigo-grey family that clears 4.5:1 on both backgrounds (5.12 / 4.70), so the
     hierarchy still reads as tertiary. Guarded by a contrast test in server/test. */
  --aw-muted: #676d85;           /* tertiary / captions */
  --aw-line: #e5e7f1;            /* hairline borders */
  --aw-line-soft: #eef0f6;       /* inner dividers */
  --aw-surface: #ffffff;         /* cards */
  --aw-canvas: #f4f5fb;          /* page background */

  /* Semantic (separate from the brand accent) */
  --aw-good: #157347;  --aw-good-bg: #e6f4ec;  --aw-good-strong: #12603c; /* success-action hover */
  --aw-warn: #b45309;  --aw-warn-bg: #fbf1e3;
  --aw-crit: #b02a37;  --aw-crit-bg: #fbebed;

  /* Elevation & shape */
  --aw-shadow-sm: 0 1px 2px rgba(20,25,50,.06);
  --aw-shadow-md: 0 2px 10px rgba(20,25,50,.06);
  --aw-shadow-lg: 0 12px 30px rgba(30,27,75,.12);
  --aw-r-sm: 8px;
  --aw-r: 12px;
  --aw-r-lg: 16px;

  /* Type — Inter when present (self-host to guarantee it), else a refined system stack */
  --aw-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --aw-fs-1: 26px;   /* page title */
  --aw-fs-2: 19px;   /* section heading */
  --aw-fs-3: 15px;   /* card heading */
  --aw-fs-body: 14px;
  --aw-fs-sm: 13px;
  --aw-fs-xs: 11.5px;
  --aw-lh: 1.55;

  /* Spacing scale (4px base) */
  --aw-s1: 4px; --aw-s2: 8px; --aw-s3: 12px; --aw-s4: 16px; --aw-s5: 20px; --aw-s6: 24px; --aw-s8: 32px;

  /* Back-compat aliases: the pages that already use these names inherit the canonical values */
  --primary: var(--aw-brand);
  --text: var(--aw-ink);
  --muted: var(--aw-slate);
  --border: var(--aw-line);
  --bg: var(--aw-canvas);
  --success: var(--aw-good);
  --warn: var(--aw-crit);
}

/* ── Line-icon convention: inline 24×24 SVGs with stroke=currentColor take the parent's colour ── */
.aw-ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9;
         stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.aw-ic-sm { width: 15px; height: 15px; }
/* Heading icon — sits before an <h3> label, inherits the heading's colour via currentColor.
   Pairs with the reusable #ic-* SVG sprite. */
.hic { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.9;
       stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -3px; margin-right: 5px; }

/* ── Reusable components (adopted page-by-page during migration) ── */
.aw-card {
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: var(--aw-r);
  box-shadow: var(--aw-shadow-sm); padding: var(--aw-s5);
}
.aw-card__title {
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--aw-slate); margin: 0 0 var(--aw-s3); display: flex; align-items: center; gap: var(--aw-s2);
}

/* Primary action = VIOLET (E6, Alex's call 27 Jul 2026). This class declared indigo while
   every page in the app rendered its primary button violet — the rule was the odd one out,
   not the pages, so the rule moved. Indigo stays what it always was: headings, the nav's
   active segment, and the brand itself. */
.aw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 var(--aw-fs-sm)/1 var(--aw-font); color: #fff; background: var(--aw-violet);
  border: 1px solid transparent; border-radius: var(--aw-r-sm); padding: 10px 15px;
  cursor: pointer; box-shadow: var(--aw-shadow-sm); transition: background .15s, box-shadow .15s, transform .05s;
}
.aw-btn:hover { background: var(--aw-violet-strong); }
.aw-btn:active { transform: translateY(1px); }
.aw-btn--ghost { background: transparent; color: var(--aw-violet); border-color: color-mix(in srgb, var(--aw-violet) 32%, var(--aw-line)); box-shadow: none; }
.aw-btn--ghost:hover { background: var(--aw-violet-tint); }
.aw-btn:focus-visible { outline: 2px solid var(--aw-violet); outline-offset: 2px; }

.aw-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--aw-fs-xs); font-weight: 600;
  padding: 3px 10px; border-radius: 20px; background: var(--aw-brand-tint); color: var(--aw-brand);
}
.aw-chip--good { background: var(--aw-good-bg); color: var(--aw-good); }
.aw-chip--warn { background: var(--aw-warn-bg); color: var(--aw-warn); }
.aw-chip--crit { background: var(--aw-crit-bg); color: var(--aw-crit); }
.aw-chip .aw-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.aw-table { width: 100%; border-collapse: collapse; font-size: var(--aw-fs-sm); }
.aw-table th {
  text-align: left; padding: 7px 8px; color: var(--aw-slate); font-weight: 600;
  font-size: var(--aw-fs-xs); letter-spacing: .04em; text-transform: uppercase; border-bottom: 1.5px solid var(--aw-line);
}
.aw-table td { padding: 8px; border-bottom: 1px solid var(--aw-line-soft); font-variant-numeric: tabular-nums; }
.aw-table tr:last-child td { border-bottom: none; }

.aw-input {
  width: 100%; font: var(--aw-fs-body)/1.4 var(--aw-font); color: var(--aw-ink);
  background: var(--aw-surface); border: 1px solid var(--aw-line); border-radius: var(--aw-r-sm);
  padding: 10px 12px; transition: border-color .15s, box-shadow .15s;
}
.aw-input:focus { outline: none; border-color: var(--aw-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--aw-brand) 15%, transparent); }

.aw-num { font-variant-numeric: tabular-nums; }

/* ── Standard empty / error state ── a centred icon + title + message, used where a list or
   panel has nothing to show yet. Pair the icon with a #ic-* sprite symbol. */
.aw-empty { text-align: center; padding: 30px 18px; color: var(--aw-slate); }
.aw-empty__icon { width: 34px; height: 34px; margin: 0 auto 10px; display: block; stroke: currentColor;
                  fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.aw-empty__title { font-size: 13.5px; font-weight: 600; color: var(--aw-ink); margin: 0 0 3px; }
.aw-empty__text { font-size: 12.5px; margin: 0; line-height: 1.5; }
.aw-empty__text a { color: var(--aw-brand); font-weight: 600; text-decoration: none; }
.aw-empty--error { color: var(--aw-crit); }
.aw-empty--error .aw-empty__icon { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .aw-btn { transition: none; }
}
