/*
 * Retail BI semantic display foundation.
 *
 * This layer intentionally reproduces the current light visual language.  It
 * owns shared UI chrome only; financial/data-series colours remain owned by
 * their modules.  A future theme may replace these values without rewriting
 * screen CSS.
 */
:root {
  color-scheme: light;

  /* Page and surfaces */
  --page-bg: #f4f7fb;
  --surface: #ffffff;
  --surface-subtle: #f8fbfd;
  --surface-elevated: #ffffff;
  --surface-muted: color-mix(in srgb, var(--surface-subtle) 88%, var(--border));
  --surface-accent: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --surface-accent-strong: color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* Text */
  --text-primary: #0c2343;
  --text-secondary: #42566d;
  --text-muted: #6e7c90;
  --text-disabled: #9aa8b6;

  /* Borders */
  --border: #dfe6ee;
  --border-strong: #b8cad9;
  --divider: #edf1f5;
  --card-border: #e1e9f1;
  --card-divider: #edf2f6;
  --header-border: #e7edf3;
  --table-container-border: #dfe8f1;

  /* Interaction */
  --accent: #0b70b5;
  --accent-hover: #095f9b;
  --accent-active: #084e83;
  --focus-ring: rgba(11, 112, 181, .38);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
  --accent-soft-hover: color-mix(in srgb, var(--accent) 16%, var(--surface));
  --accent-border: color-mix(in srgb, var(--accent) 34%, var(--border));
  --text-on-accent: #ffffff;

  /* Supporting colour is navigation chrome only. It does not own data or
   * semantic status colours. */
  --supporting: #073a65;
  --supporting-active: #052846;
  --supporting-soft: color-mix(in srgb, var(--supporting) 9%, var(--surface));

  /* Forms */
  --input-bg: #ffffff;
  --input-border: #d7e0ea;
  --input-placeholder: #7b8b9d;
  --input-focus-border: #72add1;
  --input-focus-shadow: rgba(11, 112, 181, .12);
  --input-disabled-bg: color-mix(in srgb, var(--surface-subtle) 82%, var(--border));
  --control-hover-bg: var(--accent-soft);
  --control-active-bg: var(--accent-soft-hover);

  /* Navigation */
  --sidebar-bg: linear-gradient(180deg, #061d34 0%, #06365f 100%);
  --sidebar-text: #e9f2fa;
  --sidebar-active: linear-gradient(90deg, var(--accent), var(--accent-active));
  --sidebar-hover: color-mix(in srgb, var(--accent) 18%, transparent);
  --header-bg: #ffffff;

  /* Tables */
  --table-header-bg: #f5f8fb;
  --table-row-hover: #f8fbff;
  --table-selected-bg: #eaf3f9;
  --table-sticky-bg: #ffffff;
  --table-border: var(--divider);
  --table-subtotal-bg: color-mix(in srgb, var(--accent) 8%, var(--surface));
  --table-total-bg: color-mix(in srgb, var(--accent) 14%, var(--surface));

  /* Overlays */
  --overlay-bg: rgba(6, 24, 44, .72);
  --modal-bg: #ffffff;
  --tooltip-bg: #102d47;
  --tooltip-text: #ffffff;
  --tooltip-muted: #dce8f2;
  --popover-bg: var(--surface-elevated);
  --drawer-bg: var(--surface-elevated);
  --backdrop-bg: var(--overlay-bg);

  /* Elevation */
  --shadow-card: 0 8px 24px rgba(9, 35, 66, .07);
  --shadow-floating: 0 16px 36px rgba(7, 27, 45, .24);

  /* Status colours are semantic and are never derived from the brand accent. */
  --success: #159447;
  --warning: #d49312;
  --danger: #d62e36;
  --info: #1269a8;

  /* One system font source: theme.fontSize -> --font-scale. */
  --font-scale: 1;
  --app-font-scale: var(--font-scale);
  --font-size-xs: calc(10px * var(--font-scale));
  --font-size-sm: calc(11px * var(--font-scale));
  --font-size-md: calc(12px * var(--font-scale));
  --font-size-lg: calc(15px * var(--font-scale));
  --font-size-xl: calc(20px * var(--font-scale));
  --font-size-xxl: calc(24px * var(--font-scale));
  --app-line-height: 1.45;

  /* Compatibility aliases for existing modules during phased migration. */
  --primary: var(--accent);
  --secondary: var(--accent-active);
  --bg: var(--page-bg);
  --ink: var(--text-primary);
  --muted: var(--text-muted);
  --line: var(--border);
  --green: var(--success);
  --red: var(--danger);
  --blue: var(--info);
  --shadow: var(--shadow-card);
}