/**
 * KararMotoru Design System — Faz 53.Design
 * Shared tokens, status semantics, and component standards (public + panel).
 */

:root {
  /* Color — semantic */
  --km-color-pass: #2e7d52;
  --km-color-pass-bg: #e8f5ee;
  --km-color-warning: #9a7b16;
  --km-color-warning-bg: #fff8e6;
  --km-color-blocked: #8b2635;
  --km-color-blocked-bg: #fff3f3;
  --km-color-error-safe: #5c4a12;
  --km-color-error-safe-bg: #f5f0e0;
  --km-color-contract: #174ea6;
  --km-color-contract-bg: #e8f0fe;
  --km-color-readonly: #607089;
  --km-color-readonly-bg: #eef2f8;
  --km-color-candidate: #3d2a5c;
  --km-color-candidate-bg: #e8dff5;
  --km-color-disabled: #6b7280;
  --km-color-disabled-bg: #f0f2f6;
  --km-color-oos: #6b4c9a;
  --km-color-oos-bg: #f3eef8;

  /* Typography */
  --km-font-sans: system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
  --km-font-size-xs: 0.75rem;
  --km-font-size-sm: 0.82rem;
  --km-font-size-base: 0.95rem;
  --km-font-size-md: 1rem;
  --km-font-size-lg: 1.25rem;
  --km-font-size-xl: 1.75rem;
  --km-font-weight-normal: 400;
  --km-font-weight-semibold: 600;
  --km-font-weight-bold: 700;
  --km-line-height: 1.5;

  /* Spacing */
  --km-space-1: 0.25rem;
  --km-space-2: 0.5rem;
  --km-space-3: 0.75rem;
  --km-space-4: 1rem;
  --km-space-5: 1.5rem;
  --km-space-6: 2rem;

  /* Radius & shadow */
  --km-radius-sm: 6px;
  --km-radius-md: 10px;
  --km-radius-lg: 14px;
  --km-radius-pill: 999px;
  --km-shadow-sm: 0 4px 12px rgba(23, 32, 51, 0.06);
  --km-shadow-md: 0 12px 32px rgba(23, 32, 51, 0.1);

  /* Layout */
  --km-layout-max: 1080px;
  --km-layout-public-max: 960px;
  --km-touch-min: 44px;
}

/* App shell */
.km-app-shell {
  font-family: var(--km-font-sans);
  line-height: var(--km-line-height);
}

/* Truth / risk banners */
.km-truth-banner,
.public-banner.km-truth-banner,
.panel-mobile-truth.km-truth-banner {
  border-radius: var(--km-radius-md);
  padding: var(--km-space-3) var(--km-space-4);
  font-size: var(--km-font-size-sm);
  border: 1px solid var(--km-color-warning);
  background: var(--km-color-warning-bg);
  color: var(--km-color-error-safe);
}

.km-risk-banner {
  border-left: 4px solid var(--km-color-blocked);
  background: var(--km-color-blocked-bg);
  padding: var(--km-space-3);
  font-size: var(--km-font-size-sm);
}

/* Cards */
.km-card,
.public-card.km-card,
.status-panel.km-card {
  border-radius: var(--km-radius-md);
  box-shadow: var(--km-shadow-sm);
}

/* Status badge base — always includes text label semantics */
.km-status-badge,
.pnl-ui-badge,
.chart-ui-badge,
.scanner-ui-badge,
.ai-review-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--km-space-1);
  padding: 4px 10px;
  border-radius: var(--km-radius-pill);
  font-size: var(--km-font-size-sm);
  font-weight: var(--km-font-weight-semibold);
  border: 1px solid transparent;
  max-width: 100%;
  white-space: normal;
}

.km-status-badge::before,
.pnl-ui-badge::before {
  content: none;
}

/* Status semantics */
.km-status--pass,
.chart-ui-overall.chart-ui-pass,
.scanner-ui-overall.scanner-ui-pass,
.ai-review-overall.ai-review-pass,
.ledger-pnl-ui-overall.pnl-ui-pass {
  color: var(--km-color-pass);
  background: var(--km-color-pass-bg);
  border-color: #b8d4c4;
}

.km-status--warning,
.chart-ui-overall.chart-ui-warning,
.scanner-ui-overall.scanner-ui-warning,
.ai-review-overall.ai-review-warning {
  color: var(--km-color-warning);
  background: var(--km-color-warning-bg);
  border-color: #e8d9a8;
}

.km-status--blocked,
.chart-ui-overall.chart-ui-blocked,
.chart-ui-headline.chart-headline-blocked,
.scanner-ui-overall.scanner-ui-blocked,
.ai-review-overall.ai-review-blocked,
.ai-review-headline.ai-review-headline-blocked {
  color: var(--km-color-blocked) !important;
  background: var(--km-color-blocked-bg) !important;
  border-color: #e0b4b4 !important;
}

.km-status--error-safe {
  color: var(--km-color-error-safe);
  background: var(--km-color-error-safe-bg);
}

.km-status--contract-only,
.km-status--readonly,
.pnl-ui-badge-muted,
.chart-ui-badge-muted,
.scanner-ui-badge-muted,
.ai-review-badge-muted {
  color: var(--km-color-readonly);
  background: var(--km-color-readonly-bg);
  border-color: #dbe3ef;
}

.km-status--paper-candidate,
.pnl-ui-badge-paper,
.chart-ui-badge-ohlcv,
.scanner-ui-badge-candidate,
.ai-review-badge-candidate {
  color: var(--km-color-contract);
  background: var(--km-color-contract-bg);
  border-color: #b8c9e8;
}

.km-status--not-production,
.km-status--out-of-scope,
.km-status--manual-execution {
  color: var(--km-color-oos);
  background: var(--km-color-oos-bg);
}

.km-status--candidate-only {
  color: var(--km-color-candidate);
  background: var(--km-color-candidate-bg);
}

.km-status--not-bound,
.pnl-value-neutral,
.chart-value-neutral,
.scanner-value-neutral {
  color: var(--km-color-disabled) !important;
  background: var(--km-color-disabled-bg) !important;
}

/* Never use success green on blocked */
.km-status--blocked.km-status--pass,
.chart-ui-blocked.km-status--pass {
  color: var(--km-color-blocked) !important;
  background: var(--km-color-blocked-bg) !important;
}

/* Disabled CTA */
.km-disabled-cta,
.btn-disabled.km-disabled-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--km-touch-min);
  min-width: var(--km-touch-min);
  padding: var(--km-space-2) var(--km-space-4);
  border-radius: var(--km-radius-sm);
  background: var(--km-color-disabled-bg);
  color: var(--km-color-disabled);
  border: 1px dashed #9aa8b5;
  cursor: not-allowed;
  font-size: var(--km-font-size-sm);
  font-weight: var(--km-font-weight-semibold);
}

.km-disabled-cta[aria-disabled="true"],
.btn-disabled[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.92;
}

/* Pricing card */
.km-pricing-card,
.pricing-tier.km-pricing-card {
  border: 1px solid var(--km-color-contract);
}

/* Metric card */
.km-metric-card {
  padding: var(--km-space-4);
  border: 1px solid #dbe3ef;
  border-radius: var(--km-radius-md);
}

/* Alert box */
.km-alert-box {
  padding: var(--km-space-3);
  border-radius: var(--km-radius-md);
  border: 1px solid var(--km-color-warning);
  background: var(--km-color-warning-bg);
}

/* Focus */
a:focus-visible,
button:focus-visible,
.km-disabled-cta:focus-visible {
  outline: 2px solid var(--km-color-contract);
  outline-offset: 2px;
}

/* Nav */
.km-nav,
.public-nav.km-nav,
.panel-mobile-bottom-nav.km-nav {
  gap: var(--km-space-3);
}

/* Section anchor */
.mobile-card-section.km-section-anchor {
  scroll-margin-top: 88px;
  scroll-margin-bottom: 80px;
}

/* Responsive table safe */
.km-responsive-table,
.operator-gate-row {
  flex-wrap: wrap;
  min-width: 0;
}

/* Empty / loading / error states */
.km-empty-state,
.km-loading-state,
.km-error-state {
  font-size: var(--km-font-size-sm);
  color: var(--km-color-readonly);
  padding: var(--km-space-4);
  border: 1px dashed #dbe3ef;
  border-radius: var(--km-radius-md);
}

.km-error-state {
  color: var(--km-color-blocked);
  background: var(--km-color-blocked-bg);
}

/* Form placeholder */
.km-form-placeholder {
  border: 1px dashed var(--km-color-readonly);
  padding: var(--km-space-4);
  border-radius: var(--km-radius-md);
  font-size: var(--km-font-size-sm);
}

/* PHASE 54.UI 3A — terminal dark theme extensions */
:root {
  --km-terminal-bg: #0f1419;
  --km-terminal-surface: #161b22;
  --km-terminal-surface-2: #1c2330;
  --km-terminal-border: #2a3444;
  --km-terminal-text: #e8edf4;
  --km-terminal-muted: #9aa8bc;
  --km-terminal-accent: #3d7dd6;
  --km-nav-width: 220px;
  --km-rail-width: 300px;
}

.km-terminal-dark {
  color-scheme: dark;
}

.km-status--not-production {
  color: #c9a227;
  background: rgba(201, 162, 39, 0.15);
  border-color: rgba(201, 162, 39, 0.35);
}

.km-status--paper {
  color: #7eb8ff;
  background: rgba(62, 126, 214, 0.12);
  border-color: rgba(62, 126, 214, 0.35);
}

.km-status--error {
  color: #f0a8b0;
  background: rgba(139, 38, 53, 0.25);
  border-color: rgba(139, 38, 53, 0.45);
}