/**
 * 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.onefinance-workspace,
.context-mobile-app,
body.login-body,
body.onefinance-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);
}