/* ============================================================================
 * senshin-design-system.css — canonical tokens + primitives.
 *
 * Single source of truth for spacing, type, colour, radii, shadows, and the
 * shared primitives (.pill, .card, .icon-tile, .icon-btn) used by every
 * Senshin surface. Two rules to obey, always:
 *
 *   1.  Don't introduce new colours, radii, or font sizes outside this file.
 *       If the design genuinely needs one, ADD a token here so every other
 *       surface can reference it.
 *
 *   2.  Status colour (red / amber / green) only ever signals state. The
 *       brand accent is the ONLY identity colour. Per-widget rainbows
 *       (purple = lookahead, orange = people, etc.) are forbidden — they
 *       turn the dashboard into a stained-glass window.
 *
 * Loaded via <link rel="stylesheet"> from app-shell-vnext.html.
 * ========================================================================== */

/* ═══════════════════════════════════════════════════════════════
   SENSHIN DESIGN SYSTEM — LOCKED DISCIPLINE (2026-04-28)

   1. AI grounding: all AI-generated text uses .ai-voice class
   2. Sentry message stability: dynamic content in extra{}, not message text
   3. Nav icons: unique per route, no duplicates
   4. Bottom nav: must not scroll with page content
   5. Zero-data guards: every AI endpoint rejects empty/undefined/null project_id
   6. Button standard: 34px height, 6px radius, 13px/500 font (see CLAUDE.md §6)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing ───────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;

  /* ── Radii ─────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* ── Type scale ────────────────────────────────────────── */
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-22: 22px;
  --t-28: 28px;

  /* ── Weight ────────────────────────────────────────────── */
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ── Brand ─────────────────────────────────────────────── */
  --brand:        #1B4F72;
  --brand-strong: #154360;                    /* hover / active state */
  --brand-tint:   rgba(27, 79, 114, 0.08);
  --brand-faint:  rgba(27, 79, 114, 0.04);
  --brand-strap:  #7E8FA1;

  /* ── Ink (text on light) ───────────────────────────────── */
  --ink-1: #0F1419;  /* primary headings + values */
  --ink-2: #374151;  /* body text */
  --ink-3: #6B7280;  /* secondary / supporting */
  --ink-4: #9CA3AF;  /* faint / placeholder */

  /* ── Surface ───────────────────────────────────────────── */
  --surface-1: #FFFFFF;
  --surface-2: #F9FAFB;
  --surface-3: #F3F4F6;
  --surface-page: #FAFAFA;

  /* ── Border ────────────────────────────────────────────── */
  --border-1: #c5c0b8;
  --border-2: #ada8a0;
  --border-dashed: rgba(0, 0, 0, 0.07);

  /* ── Shadow ────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 1px 3px rgba(15, 20, 25, 0.06), 0 4px 12px rgba(15, 20, 25, 0.04);
  --shadow-pop: 0 4px 12px rgba(15, 20, 25, 0.10), 0 12px 32px rgba(15, 20, 25, 0.06);

  /* ── Semantic (status only) ────────────────────────────── */
  --red:          #B91C1C;
  --red-tint:     rgba(185, 28, 28, 0.10);
  --red-strong:   #991B1B;
  --amber:        #D97706;
  --amber-tint:   rgba(217, 119, 6, 0.12);
  --green:        #22c55e;
  --green-tint:   rgba(34, 197, 94, 0.12);

  /* ── Animation ─────────────────────────────────────────── */
  --dur-fast: 0.12s;
  --dur-base: 0.18s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Type setup — every Senshin surface inherits this
 * ────────────────────────────────────────────────────────────────────────── */
.ss-typeface {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               'Segoe UI', Arial, sans-serif;
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--ink-1);
}

/* ──────────────────────────────────────────────────────────────────────────
 * .pill — the ONE pill primitive. Variants are colour-only.
 * Default size: 20px tall. Use .pill--md for stat-strip heights (24px).
 * ────────────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 20px;
  padding: 0 8px;
  border-radius: var(--r-xs);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1;
  font-family: inherit;
}
.pill--md          { height: 24px; padding: 0 10px; font-size: var(--t-11); }
.pill--red         { background: var(--red-tint);    color: var(--red); }
.pill--amber       { background: var(--amber-tint);  color: var(--amber); }
.pill--green       { background: var(--green-tint);  color: var(--green); }
.pill--brand       { background: var(--brand-tint);  color: var(--brand); }
.pill--neutral     { background: var(--surface-3);   color: var(--ink-2); }
.pill--solid-red   { background: var(--red);         color: #fff; }
.pill--solid-brand { background: var(--brand);       color: #fff; }

/* ──────────────────────────────────────────────────────────────────────────
 * .card — the ONE card primitive.
 * ────────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.card:hover { border-color: var(--border-2); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.card { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform 120ms ease-out; }
.card__head {
  display: flex; align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.card__title-block { flex: 1; min-width: 0; }
.card__title {
  font-size: var(--t-14);
  font-weight: var(--w-bold);
  color: var(--ink-1);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.card__sub {
  font-size: var(--t-11);
  color: var(--ink-3);
  line-height: 1.4;
  margin-top: 3px;
}
.card__body { flex: 1; min-height: 60px; }
.card__foot {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--border-dashed);
  font-size: var(--t-11);
  color: var(--ink-4);
}

/* ──────────────────────────────────────────────────────────────────────────
 * .icon-tile — the small icon square used in card headers.
 * Always brand-coloured. No per-widget rainbow.
 * ────────────────────────────────────────────────────────────────────────── */
.icon-tile {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand);
}

/* ──────────────────────────────────────────────────────────────────────────
 * .icon-btn — circular utility button (refresh, close, etc.)
 * ────────────────────────────────────────────────────────────────────────── */
.icon-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  color: var(--ink-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast),
              border-color var(--dur-fast);
  padding: 0;
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink-1); border-color: var(--border-2); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.is-loading svg { animation: ssSpin 0.9s linear infinite; }
@keyframes ssSpin { to { transform: rotate(360deg); } }

/* ──────────────────────────────────────────────────────────────────────────
 * .chip — toggle chip for filter selection (multi-select)
 * ────────────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-1);
  background: var(--surface-1);
  color: var(--ink-3);
  font-size: var(--t-11);
  font-weight: var(--w-medium);
  cursor: pointer;
  user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  font-family: inherit;
}
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: var(--w-semibold);
}
/* RAG-specific chip variants (Alex feedback 2026-04-29):
   on Dashboards, the Red/Amber/Green status chips must use RAG colours,
   not the generic brand-blue active state. Selector matches the
   `chip--rag-{red|amber|green}` class added by dashboards.js when a
   multi-select value is one of red/amber/green. */
.chip.chip--rag-red.is-on    { background: var(--red);   border-color: var(--red);   }
.chip.chip--rag-amber.is-on  { background: var(--amber); border-color: var(--amber); }
.chip.chip--rag-green.is-on  { background: var(--green); border-color: var(--green); }
.chip.chip--rag-red:hover    { border-color: var(--red);   color: var(--red);   }
.chip.chip--rag-amber:hover  { border-color: var(--amber); color: var(--amber); }
.chip.chip--rag-green:hover  { border-color: var(--green); color: var(--green); }

/* ──────────────────────────────────────────────────────────────────────────
 * .field — small filter inputs (number / date / single-select)
 * Same height as chips (22px) so filter rows look uniform.
 * ────────────────────────────────────────────────────────────────────────── */
.field {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: var(--t-11);
  font-family: inherit;
  outline: none;
  transition: border-color var(--dur-fast);
}
.field:hover { border-color: var(--border-2); }
.field:focus { border-color: var(--brand); }
.field-label {
  display: block;
  font-size: var(--t-10);
  font-weight: var(--w-semibold);
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Filter row — common layout for filter clusters above card body
 * ────────────────────────────────────────────────────────────────────────── */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-3);
  border-bottom: 1px dashed var(--border-dashed);
}
.filter-cell { display: flex; flex-direction: column; min-width: 0; }
.filter-cell--chips { flex: 1; }
.filter-cell--chips .chips-row { display: flex; flex-wrap: wrap; gap: 4px; }

/* ──────────────────────────────────────────────────────────────────────────
 * Skeleton — shimmer rows for loading state
 * ────────────────────────────────────────────────────────────────────────── */
.skel-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--surface-3);
}
.skel-row:last-child { border-bottom: none; }
.skel-bar {
  height: 10px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg,
    var(--surface-3) 0%,
    var(--border-1) 50%,
    var(--surface-3) 100%);
  background-size: 200% 100%;
  animation: ssShimmer 1.2s ease-in-out infinite;
}
@keyframes ssShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Empty state
 * ────────────────────────────────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-6) var(--s-3);
  text-align: center;
  color: var(--ink-3);
}
.empty-state svg     { color: var(--ink-4); }
.empty-state__title  { font-size: var(--t-12); font-weight: var(--w-semibold); color: var(--ink-2); }
.empty-state__sub    { font-size: var(--t-11); color: var(--ink-4); }

/* ──────────────────────────────────────────────────────────────────────────
 * RAG dot — coloured indicator with halo
 * ────────────────────────────────────────────────────────────────────────── */
.rag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rag-dot--red   { background: var(--red);   box-shadow: 0 0 0 3px var(--red-tint); }
.rag-dot--amber { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-tint); }
.rag-dot--green { background: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }

/* ──────────────────────────────────────────────────────────────────────────
 * Mini bar (% complete, budget split, etc.) — fixed height, fixed radius
 * ────────────────────────────────────────────────────────────────────────── */
.mini-bar {
  height: 4px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}
.mini-bar > span { display: block; height: 100%; }
.mini-bar > .mb-fill        { background: var(--brand); }
.mini-bar > .mb-fill--green { background: var(--green); }
.mini-bar > .mb-fill--amber { background: var(--amber); }
.mini-bar > .mb-fill--red   { background: var(--red); }
.mini-bar > .mb-fill--ghost { background: var(--border-1); }
.mini-bar > .mb-fill--accrual { background: var(--green); opacity: 0.5; }

/* ============================================================================
 * BACK-COMPAT ALIASES (deprecated — added 2026-04-27 in the C7 follow-up sweep)
 *
 * The codebase's pre-canon vocabulary (--bg1, --t1..t4, --br, --rag-red,
 * --color-amber/green/blue/purple, --btn-primary-*, --brand-primary etc.)
 * lived in app/static/css/design-tokens.css and was sprayed across ~290
 * pages. Mass-renaming all call-sites in one go was rejected as too risky;
 * instead, every legacy name is mapped here to its canonical replacement.
 *
 * Two effects of this shim:
 *   1. Every page that still uses --bg1 / --t1 / --rag-red / etc. now reads
 *      values from the canonical tokens above. Single source of truth.
 *   2. Status reds / ambers / greens shift slightly to the canonical values
 *      (--red #B91C1C, --amber #B45309, --green #15803D — deeper, lower
 *      saturation). This is intentional: it kills the per-page colour drift
 *      `44877dc` was written to fix.
 *
 * --color-blue / --color-purple are NOT aliased. The canon explicitly
 * reserves colour for status. Legacy call-sites keep their hex values
 * (defined in design-tokens.css) until the raw-hex sweep retires them.
 *
 * RULES:
 *   - Do not add new aliases here. Do not introduce new uses of these
 *     legacy names. Both columns are deprecated.
 *   - When a file is touched for any reason, swap legacy → canonical
 *     names in that file as part of the same change.
 *   - The H13 Semgrep guard (Sprint 18) will eventually fail CI on any
 *     new use of these aliases.
 * ========================================================================== */
:root {
  /* Backgrounds → Surfaces */
  --bg1:        var(--surface-1);
  --bg2:        var(--surface-2);
  --bg3:        var(--surface-3);
  --bg-nav:     var(--surface-2);

  /* Text → Ink */
  --t1: var(--ink-1);
  --t2: var(--ink-2);
  --t3: var(--ink-3);
  --t4: var(--ink-4);

  /* Borders */
  --br:        var(--border-1);
  --br-hover:  var(--border-2);
  --br-focus:  var(--brand);

  /* RAG → Semantic */
  --rag-red:    var(--red);
  --rag-red-bg: var(--red-tint);
  --rag-amber:  var(--amber);
  --rag-green:  var(--green);

  /* Colour ramp → Semantic (status only) */
  --color-red:         var(--red);
  --color-red-bg:      var(--red-tint);
  --color-red-light:   var(--red-tint);
  --color-amber:       var(--amber);
  --color-amber-bg:    var(--amber-tint);
  --color-amber-light: var(--amber-tint);
  --color-green:       var(--green);
  --color-green-bg:    var(--green-tint);
  --color-green-light: var(--green-tint);
  /* --color-blue / --color-purple deliberately NOT aliased — see header. */

  /* Brand legacy names */
  --brand-primary:       var(--brand);
  --brand-primary-hover: #154360;
  --color-navy:          var(--brand);
  --color-navy-hover:    #154360;

  /* Button tokens */
  --btn-primary-bg:         var(--brand);
  --btn-primary-text:       #fff;
  --btn-primary-hover-bg:   #154360;
  --btn-secondary-bg:       transparent;
  --btn-secondary-text:     var(--brand);
  --btn-secondary-border:   var(--border-1);
  --btn-secondary-hover-bg: var(--brand-tint);
  --btn-tertiary-text:      var(--ink-2);
}