:root {
  --padding-1: 1.2rem;
  --color-active: #5071ff;
  --color-active-hover: #2f56ff;
  --color-background: #f4f6fb;
  --color-background-secondary: #ffffff;
  --color-background-tertiary: #eef2f7;
  --card-border-radius: 2rem;
  --color-close: #6b7280;
  --color-close-hover: #ff0060;
  --text-color: var(--color-dark);
  --text-color-muted: var(--color-dark-variant);
  --color-delete: #ff0000;
  --color-delete-hover: #ff003c;
  --color-dark: #363949;
  --color-dark-variant: #677483;
  --color-highlight-hover: #009ee6;
  --color-info-dark: #7d8da1;
  --color-light: rgba(132, 139, 200, 0.18);
  --color-primary: #00b0ff;
  --color-primary-hover: #33c0ff;
  --color-secondary: #5071ff;
  --color-secondary-hover: #1e48ff;
  --color-tertiary: #7c95ff;
  --color-tertiary-hover: #0d3bff;
  /* Equal RGB blend of the default primary/secondary brand colors. The
     server-resolved tenant theme replaces this with that tenant's blend. */
  --color-notification: #2891ff;
  --color-create: #34a5f5e3;
  --color-create-hover: #12806a;
  --color-cancel: #dc2626;
  --color-cancel-hover: #991b1b;
  --color-info: #2563eb;
  --color-warning: #f7d060;

  --card-padding: 1.8rem;
  --border-radius-1: 0.4rem;
  --border-radius-2: 1.2rem;
  /* Shared elevation scale. Keep shadows neutral so tenant brand colors do
     not tint every surface, while still allowing dark mode to deepen them. */
  --shadow-color: rgba(31, 41, 55, 0.13);
  --shadow-color-soft: rgba(31, 41, 55, 0.07);
  --shadow-color-ambient: rgba(71, 85, 105, 0.04);
  --surface-shadow-color: rgba(31, 41, 55, 0.1);
  --surface-shadow-color-soft: rgba(31, 41, 55, 0.05);
  --surface-shadow-color-ambient: rgba(71, 85, 105, 0.03);
  --box-shadow: 0 2px 5px var(--shadow-color-soft),
    0 10px 24px var(--shadow-color),
    0 18px 38px var(--shadow-color-ambient);
  --box-shadow-hover: 0 4px 9px var(--shadow-color-soft),
    0 16px 34px var(--shadow-color),
    0 24px 48px var(--shadow-color-ambient);
  --box-shadow-surface: 0 1px 2px var(--surface-shadow-color-soft),
    0 6px 16px var(--surface-shadow-color),
    0 14px 30px var(--surface-shadow-color-ambient);
  --box-shadow-surface-hover: 0 2px 5px var(--surface-shadow-color-soft),
    0 10px 24px var(--surface-shadow-color),
    0 18px 38px var(--surface-shadow-color-ambient);
  --box-shadow-control: 0 1px 2px var(--surface-shadow-color-soft),
    0 4px 10px var(--surface-shadow-color),
    0 8px 18px var(--surface-shadow-color-ambient);
  --box-shadow-control-hover: 0 2px 4px var(--surface-shadow-color-soft),
    0 7px 16px var(--surface-shadow-color),
    0 12px 24px var(--surface-shadow-color-ambient);
  --box-shadow-overlay: 0 12px 30px rgba(15, 23, 42, 0.22),
    0 3px 8px rgba(15, 23, 42, 0.14);
  --settings-panel-border: rgba(54, 57, 73, 0.16);
  --color-white: #fff;
}

.dark-mode-variables {
  --color-background: #181a1e;
  --color-background-secondary: var(--color-white);
  --color-background-tertiary: #334155;
  --text-color: var(--color-dark);
  --text-color-muted: var(--color-dark-variant);
  --color-dark: #edeffd;
  --color-dark-variant: #f6f6f9;
  --color-light: rgba(0, 0, 0, 0.4);
  /* Dark surfaces need both black depth and a cool ambient falloff. A purely
     black shadow disappears against #181a1e and makes elevated cards/tables
     look flat even when a box-shadow is technically present. */
  --shadow-color: rgba(0, 0, 0, 0.72);
  --shadow-color-soft: rgba(255, 255, 255, 0.11);
  --shadow-color-ambient: rgba(76, 91, 135, 0.42);
  --surface-shadow-color: rgba(0, 0, 0, 0.64);
  --surface-shadow-color-soft: rgba(255, 255, 255, 0.08);
  --surface-shadow-color-ambient: rgba(76, 91, 135, 0.34);
  /* Recompose every elevation role inside the dark-mode scope. Merely
     overriding the component colors is insufficient because the composite
     custom properties declared on :root inherit their already-computed light
     values. */
  --box-shadow: 0 2px 5px var(--shadow-color-soft),
    0 10px 24px var(--shadow-color),
    0 18px 38px var(--shadow-color-ambient);
  --box-shadow-hover: 0 4px 9px var(--shadow-color-soft),
    0 16px 34px var(--shadow-color),
    0 24px 48px var(--shadow-color-ambient);
  --box-shadow-surface: 0 1px 2px var(--surface-shadow-color-soft),
    0 6px 16px var(--surface-shadow-color),
    0 14px 30px var(--surface-shadow-color-ambient);
  --box-shadow-surface-hover: 0 2px 5px var(--surface-shadow-color-soft),
    0 10px 24px var(--surface-shadow-color),
    0 18px 38px var(--surface-shadow-color-ambient);
  --box-shadow-control: 0 1px 2px var(--surface-shadow-color-soft),
    0 4px 10px var(--surface-shadow-color),
    0 8px 18px var(--surface-shadow-color-ambient);
  --box-shadow-control-hover: 0 2px 4px var(--surface-shadow-color-soft),
    0 7px 16px var(--surface-shadow-color),
    0 12px 24px var(--surface-shadow-color-ambient);
  --box-shadow-overlay: 0 12px 30px rgba(0, 0, 0, 0.72),
    0 3px 8px rgba(0, 0, 0, 0.46),
    0 22px 52px rgba(76, 91, 135, 0.38);
  --settings-panel-border: rgba(255, 255, 255, 0.14);
  --color-white: #202528;
}