:root {
  /* Brand core */
  --mg-teal: #17A38C;
  --mg-teal-hover: #128A76;
  --mg-teal-deep: #0E7C6B;
  --mg-teal-tint: #E2F3EF;
  --mg-teal-tint-border: #B9E0D7;
  --mg-logo-gray: #9C9EA1;

  /* Ink (dark chrome: sidebars, footers, table headers on dark) */
  --mg-ink: #232B2A;
  --mg-ink-hover: #2E3836;
  --mg-ink-divider: #3A4442;
  --mg-ink-text: #B9C2BF;
  --mg-ink-text-strong: #E8ECEA;
  --mg-ink-muted: #7E8A86;
  --mg-ink-label: #6E7A76;

  /* Surfaces */
  --mg-page: #F4F5F4;
  --mg-card: #FFFFFF;
  --mg-strip: #FAFBFA;
  --mg-table-head: #F1F3F2;
  --mg-zebra: #F7F8F8;
  --mg-row-hover: #F6FAF9;

  /* Borders */
  --mg-border: #DDE1DF;
  --mg-border-control: #C9CFCC;
  --mg-border-row: #EEF0EF;

  /* Text */
  --mg-text: #222927;
  --mg-text-2: #5A6461;
  --mg-text-muted: #6B7370;
  --mg-text-faint: #98A09D;
  --mg-text-zero: #C7CCCA;

  /* Status (company-wide color language: red action, amber caution, green good, gray neutral) */
  --mg-red: #C0392B;
  --mg-red-tint: #FBEAE7;
  --mg-red-border: #E5C4BE;
  --mg-amber: #A8720A;
  --mg-amber-text: #8A6D1F;
  --mg-amber-tint: #FBF3D9;
  --mg-amber-border: #E8D89A;
  --mg-green: #1E6B34;
  --mg-green-tint: #E3F3E4;
  --mg-green-border: #B5DDB9;
  --mg-neutral: #4A5350;
  --mg-neutral-tint: #ECEEED;

  /* Semantic aliases */
  --surface-page: var(--mg-page);
  --surface-card: var(--mg-card);
  --surface-strip: var(--mg-strip);
  --surface-chrome: var(--mg-ink);
  --text-body: var(--mg-text);
  --text-secondary: var(--mg-text-2);
  --text-muted: var(--mg-text-muted);
  --accent: var(--mg-teal);
  --accent-hover: var(--mg-teal-hover);
  --link: var(--mg-teal-deep);
  --link-hover: #0A5C50;
  --border-default: var(--mg-border);
  --border-control: var(--mg-border-control);
  --danger: var(--mg-red);
  --warning: var(--mg-amber);
  --success: var(--mg-green);
}