/**
 * OneFinance canonical UI tokens — DESIGN_ONEFINANCE_UI_COLOR_AND_SEMANTIC_SYSTEM.md
 * Load before shell stylesheets (workspace, portal, mobile).
 * Cool Stage elevated surface system (2026-07): cool wash + white elevated panels +
 * Deep Navy / Slate Teal accents. No module palettes; no brand gradients.
 */

:root,
body.investscope-workspace,
.context-mobile-app,
body.login-body,
body.investscope-public-site {
  /* —— Surfaces (Cool Stage) —— */
  --color-bg-app: #eef1f4;
  --color-bg-surface: #ffffff;
  --color-bg-surface-alt: #e8ecf0;
  --color-bg-muted: #eef1f4;

  /* —— Brand —— */
  --color-brand-primary: #2b4162;
  --color-brand-primary-hover: #243858;
  --color-brand-primary-contrast-text: #ffffff;
  --color-brand-secondary: #385f71;
  --color-brand-secondary-hover: #325968;
  --color-brand-secondary-contrast-text: #ffffff;
  --color-brand-secondary-soft: rgba(56, 95, 113, 0.12);

  /* —— Borders / text (cool neutrals) —— */
  --color-border-soft: #dde3e8;
  --color-border-strong: #c5ced6;
  --color-text-primary: #1e2d42;
  --color-text-secondary: #3d5160;
  --color-text-muted: #5f7080;

  /* —— Action accent (Deep Navy) —— */
  --color-accent-primary: #2b4162;
  --color-accent-primary-hover: #243858;
  --color-accent-primary-soft: var(--color-brand-secondary-soft);

  /* —— Interaction —— */
  --color-hover-soft: rgba(43, 65, 98, 0.06);
  --color-selected-soft: rgba(56, 95, 113, 0.14);
  --color-focus-ring: rgba(43, 65, 98, 0.22);
  --color-focus-ring-solid: #2b4162;
  --color-brand-hover-accent: var(--color-hover-soft);
  --color-brand-hover-soft: var(--color-hover-soft);
  --color-brand-focus-ring-glow: var(--color-focus-ring);

  /* —— Elevation / radius (vivid application) —— */
  --color-elevation-panel: 0 4px 18px rgba(30, 45, 66, 0.08);
  --color-elevation-primary: 0 2px 8px rgba(43, 65, 98, 0.28);
  --color-elevation-send: 0 2px 10px rgba(43, 65, 98, 0.35);
  --radius-panel: 1rem;
  --radius-control: 0.65rem;

  /* —— Warm / earth — ACCENT ONLY —— */
  --color-accent-warm: #d7b377;
  --color-accent-warm-hover: #c9a66a;
  --color-accent-warm-soft: rgba(215, 179, 119, 0.14);
  --color-accent-earth: #8f754f;
  --color-accent-earth-hover: #817348;
  --color-accent-earth-soft: rgba(143, 117, 79, 0.12);

  /* —— Semantic states —— */
  --color-state-success-bg: #edf5f1;
  --color-state-success-border: #c2d8cc;
  --color-state-success-text: #2d5544;
  --color-state-success-icon: #3a6652;

  --color-state-warning-bg: #faf6ef;
  --color-state-warning-border: #e0d2b8;
  --color-state-warning-text: #6e5a3d;
  --color-state-warning-icon: #8f754f;

  --color-state-danger-bg: #f8f0ee;
  --color-state-danger-border: #d4b0a8;
  --color-state-danger-text: #7d4540;
  --color-state-danger-icon: #8a5248;

  --color-state-info-bg: #edf2f5;
  --color-state-info-border: #b5ccd6;
  --color-state-info-text: #2f4f5f;
  --color-state-info-icon: #385f71;

  --color-state-neutral-bg: #f2f4f6;
  --color-state-neutral-border: #dde1e6;
  --color-state-neutral-text: #5a6570;
  --color-state-neutral-icon: #6b7785;

  --color-state-progress-bg: #edf3f7;
  --color-state-progress-border: #a8c0ce;
  --color-state-progress-text: #2b4162;
  --color-state-progress-icon: #385f71;

  /* —— Legacy / shell aliases —— */
  --primary-blue: var(--color-brand-primary);
  --primary-blue-hover: var(--color-brand-primary-hover);
  --border-light: var(--color-border-soft);
  --text-primary: var(--color-text-primary);
  --text-muted: var(--color-text-muted);
  --background-light: var(--color-bg-app);
  --color-shadow-soft: rgba(43, 65, 98, 0.08);
  --color-shadow-nav: rgba(43, 65, 98, 0.14);
}

/* CSP-safe presentation — no HTML style attributes */
.is-confirm-card {
  max-width: 600px;
}

.is-form-actions-flush {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

.is-word-break {
  word-break: break-word;
}

.is-pre-wrap {
  white-space: pre-wrap;
}

.is-scroll-panel-sm {
  max-height: 150px;
  overflow-y: auto;
}

.is-scroll-panel-md {
  max-height: 200px;
  overflow-y: auto;
}

.is-scroll-panel-lg {
  max-height: 240px;
  overflow-y: auto;
}

.is-scroll-panel-xl {
  max-height: 320px;
  overflow-y: auto;
}

.is-progress-xs {
  height: 0.5rem;
}

.is-progress-sm {
  height: 8px;
}

.is-progress-lg {
  height: 25px;
}

.is-empty-icon {
  font-size: 2rem;
  opacity: 0.3;
}

.is-table-clip {
  max-width: 300px;
}

.is-auth-title {
  color: var(--color-text-primary);
  letter-spacing: -0.025em;
}

.is-auth-lead {
  font-size: 0.875rem;
}

.is-auth-action {
  width: auto;
  padding: 0.65rem 1.5rem;
}

.is-pix-qr {
  max-width: 220px;
}

.is-col-select {
  width: 2.5rem;
}

.is-width-auto {
  width: auto;
}

.is-pointer {
  cursor: pointer;
}

.is-caption-xs {
  font-size: 0.75rem;
}

.is-bound-width {
  width: var(--is-bound-width, 0%);
  max-width: 100%;
}

.is-bound-box {
  width: var(--is-bound-width, auto);
  min-width: var(--is-bound-min-width, 0);
}

.is-bound-min-width {
  min-width: var(--is-bound-min-width, 0);
}

.is-bound-height {
  height: var(--is-bound-height, 0%);
}

.is-bound-left {
  left: var(--is-bound-left, 0);
}

.is-bound-top {
  top: var(--is-bound-top, 0);
}

.is-bound-flex-basis {
  flex: 0 0 var(--is-bound-flex-basis, 0%);
}

.is-import-log {
  max-height: 150px;
  overflow-y: auto;
  font-size: 0.875rem;
}

.is-progress-label {
  min-width: 2em;
}