/*
 * Story 1.4 — tokens.css placeholder, extended for Epic 8 (2026-05-18).
 *
 * The original Story 1.4 placeholder block (--mp-color-* names) is kept
 * intact below so signup/login/onboarding surfaces don't regress. The
 * Epic 8 Visual-DNA token block (--mp-* names) was added 2026-05-18 per
 * the design-alignment chore — sourced verbatim from
 * `_bmad-output/design-references/bundle/project/dashboard-and-audit.css`
 * (the actual Claude Design canvas, not the per-screen stubs).
 *
 * Two naming conventions coexist on purpose:
 *   - Legacy `--mp-color-*` — auth surfaces (Stories 1.x-4.x)
 *   - Epic 8 `--mp-*`       — dashboard/audit/margin/banners (Stories 8.x+)
 *
 * Migrating auth surfaces to the Epic 8 token system is out of scope for
 * this chore (would change appearance of signup/login/onboarding). Plan
 * the migration as a separate story when Epic 8 stabilises.
 */

:root {
  /* ── Legacy tokens (Story 1.4 placeholder — auth surfaces depend on these) ── */
  --mp-color-bg: #f7f8fa;
  --mp-color-fg: #0f1f3a;
  --mp-color-primary: #1a2233;
  --mp-color-primary-fg: #ffffff;
  --mp-color-danger: #c0392b;
  --mp-color-success: #1f7a4d;
  --mp-color-border: #d8dee8;
  --mp-radius-sm: 4px;
  --mp-radius-md: 8px;
  --mp-spacing-xs: 4px;
  --mp-spacing-sm: 8px;
  --mp-spacing-md: 16px;
  --mp-spacing-lg: 24px;
  --mp-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mp-font-display: 'Manrope', var(--mp-font-body);

  /* ── Epic 8 Visual-DNA tokens (added 2026-05-18, sourced from design bundle) ── */
  /* Surface + background hierarchy */
  --mp-bg: #f5f7fa;
  --mp-surface: #ffffff;
  --mp-surface-alt: #eef1f5;

  /* Ink hierarchy — Pedro's refined values from header-pure.html design 2026-05-19.
   * --mp-ink intentionally matches --mp-primary (#1a2233): body text and the
   * brand colour are the same navy. */
  --mp-ink: #1a2233;
  --mp-ink-2: #4a5366;
  --mp-ink-3: #8590a3;

  /* Line variants (sharp + soft for layered separators) — header-pure.html values */
  --mp-line: #e2e6ee;
  --mp-line-soft: #eef1f6;

  /* Brand primary scale (navy — Pedro's chosen value 2026-05-18, slightly
   * lighter than the design bundle's #00113a). Both legacy --mp-color-primary
   * (above) and Epic 8 --mp-primary now share this value so the whole app
   * — auth surfaces + dashboard — uses one cohesive navy. --mp-primary-2 is
   * the brighter hover; --mp-primary-tint is the focus/accent fill. */
  --mp-primary: #1a2233;
  --mp-primary-2: #2a3548;
  --mp-primary-tint: #dbe1ff;

  /* Semantic colours — aligned 2026-05-19 to banners-pure.html exact values.
   * The OKLCH forms (used briefly during early Epic 8) read too saturated
   * vs the design canvas; the design uses flat hex anchors with explicit
   * -soft and -border variants for each variant. Banners + value rows in
   * the margin editor pick up these values. */
  --mp-win: #2d8b5f;
  --mp-win-soft: #e3f1ea;
  --mp-loss: #c4453a;
  --mp-loss-soft: #fae8e6;
  --mp-loss-border: #f0bdb6;
  --mp-warn: #c47a1c;
  --mp-warn-soft: #fbf0dd;
  --mp-warn-border: #ecc995;
  --mp-info: #3a6ea8;
  --mp-info-soft: #e7eef8;
  --mp-info-border: #c1d4ec;
  /* Neutral / paused palette for the customer-pause + transient banners */
  --mp-paused-bg: #eef0f4;
  --mp-paused-fg: #4a5366;
  --mp-paused-border: #e2e6ee;

  /* Epic 8 radius scale (NOT the legacy 4/8 scale; design uses 8/12/18) */
  --mp-radius-sm-epic8: 8px;
  --mp-radius: 12px;
  --mp-radius-lg: 18px;

  /* Shadow elevation system */
  --mp-shadow-sm: 0 1px 2px rgba(10, 18, 48, 0.04), 0 1px 1px rgba(10, 18, 48, 0.02);
  --mp-shadow-md: 0 4px 12px rgba(10, 18, 48, 0.05), 0 2px 4px rgba(10, 18, 48, 0.03);
  --mp-shadow-lg: 0 24px 48px rgba(10, 18, 48, 0.08), 0 8px 16px rgba(10, 18, 48, 0.04);

  /* Mono font for code-like surfaces (audit log entry IDs, SKU IDs, etc.) */
  --mp-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Backward-compat aliases for Story 4.9 banner CSS ──
   * Story 4.9 banner rules in components.css use --mp-danger / --mp-warning
   * (and -soft variants). The Epic 8 design system uses --mp-loss / --mp-warn
   * for the same semantic role. These aliases keep the banner CSS working
   * after the Story 4.9 placeholder :root block was deleted from
   * components.css on 2026-05-19. Can be removed when banner rules are
   * migrated to the design-system names. */
  --mp-danger: var(--mp-loss);
  --mp-danger-soft: var(--mp-loss-soft);
  --mp-warning: var(--mp-warn);
  --mp-warning-soft: var(--mp-warn-soft);

  /* Story 8.9: Interception page — sticky-header height design token.
   * Used by .mp-intercept-wrapper to subtract header from min-height calc.
   * Value is the empirically-observed render height at MVP (14px top + 14px
   * bottom padding on .mp-header-inner plus tallest child ≈ 64px total).
   * If a future header chore changes the header height, update this one
   * token value and all .mp-intercept-wrapper min-height calcs auto-adjust. */
  --mp-sticky-header-h: 64px;
}

* { box-sizing: border-box; }

.mp-body {
  margin: 0;
  background: var(--mp-color-bg);
  color: var(--mp-color-fg);
  font-family: var(--mp-font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.mp-header {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid var(--mp-color-border);
  padding: var(--mp-spacing-md) var(--mp-spacing-lg);
  z-index: 10;
}

.mp-header-brand {
  font-family: var(--mp-font-display);
  font-weight: 700;
  color: var(--mp-color-primary);
  text-decoration: none;
  font-size: 1.25rem;
}

/* .mp-main rule removed 2026-05-15 (post-Story 8.1 smoke test).
 * The previous rule (display: flex; justify-content: center) made
 * .mp-main a horizontal flex row, which caused Story 8.1's dashboard
 * banner + KPI grid to render as side-by-side stretched children
 * instead of stacked block layout. The dashboard rule lives in
 * layout.css now (correct ownership: tokens.css = design tokens,
 * layout.css = layout primitives, components.css = component styles). */

/* .mp-footer moved to layout.css (2026-05-28, A-DW-1 from mid-Epic-7/8 retro)
 * per CSS file ownership rule. Properties merged: layout.css's border-top
 * + tokens.css's padding + text-align preserved. The redundant `color:
 * #6b7280` was dropped — `.mp-footer-copy` already sets its own color via
 * `--mp-ink-3`, so the parent declaration had no visible effect. */

.mp-auth-card {
  background: #fff;
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-md);
  padding: var(--mp-spacing-lg);
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.mp-auth-card h1 {
  font-family: var(--mp-font-display);
  margin: 0 0 var(--mp-spacing-md);
  font-size: 1.5rem;
}

.mp-field {
  margin-bottom: var(--mp-spacing-md);
}

.mp-field label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: var(--mp-spacing-xs);
  font-weight: 600;
}

.mp-field input {
  width: 100%;
  padding: var(--mp-spacing-sm) var(--mp-spacing-md);
  border: 1px solid var(--mp-color-border);
  border-radius: var(--mp-radius-sm);
  font: inherit;
}

.mp-field-error {
  color: var(--mp-color-danger);
  font-size: 0.875rem;
  margin: var(--mp-spacing-xs) 0 0;
}

.mp-form-top-error {
  background: #fde8e6;
  color: var(--mp-color-danger);
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-spacing-sm) var(--mp-spacing-md);
  margin-bottom: var(--mp-spacing-md);
}

.mp-form-top-success {
  background: #e3f5ec;
  color: var(--mp-color-success);
  border-radius: var(--mp-radius-sm);
  padding: var(--mp-spacing-sm) var(--mp-spacing-md);
  margin-bottom: var(--mp-spacing-md);
}

.mp-btn {
  display: inline-block;
  padding: var(--mp-spacing-sm) var(--mp-spacing-lg);
  border: 0;
  border-radius: var(--mp-radius-sm);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.mp-btn-primary {
  background: var(--mp-color-primary);
  color: var(--mp-color-primary-fg);
}

.mp-auth-link {
  margin-top: var(--mp-spacing-md);
  text-align: center;
  font-size: 0.875rem;
}

.mp-auth-link a {
  color: var(--mp-color-primary);
}

.mp-inline-error {
  color: var(--mp-color-danger);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0 0 var(--mp-spacing-md);
}

.mp-inline-retry {
  color: var(--mp-color-danger);
  font-size: 0.875rem;
  margin: 0 0 var(--mp-spacing-sm);
}

.mp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}