:root {
  /* ---- Brand ramp (Fluent "Communication Blue") ---- */
  --brand-shade-dark:   #004578;
  --brand-shade:        #005A9E;
  --brand-primary:      #0078D4;
  --brand-hover:        #106EBE;
  --brand-tint-10:      #C7E0F4;
  --brand-tint-20:      #DEECF9;
  --brand-tint-30:      #EFF6FC;

  /* ---- Neutral ramp (Fluent Neutral) ---- */
  --neutral-white:      #FFFFFF;
  --neutral-8:          #FAF9F8;
  --neutral-16:         #F3F2F1;
  --neutral-24:         #EDEBE9;
  --neutral-32:         #E1DFDD;
  --neutral-40:         #D2D0CE;
  --neutral-48:         #C8C6C4;
  --neutral-64:         #A19F9D;
  --neutral-80:         #797775;
  --neutral-96:         #605E5C;
  --neutral-112:        #484644;
  --neutral-128:        #323130;
  --neutral-144:        #201F1E;
  --neutral-black:      #000000;

  /* ---- Semantic status (paired with icon/text — never color alone) ---- */
  --status-success:        #107C10;
  --status-success-bg:     #DFF6DD;
  --status-success-border: #9FD89D;
  --status-warning:        #9D5D00;
  --status-warning-bg:     #FFF4CE;
  --status-warning-border: #F2D06B;
  --status-danger:         #D13438;
  --status-danger-bg:      #FDE7E9;
  --status-danger-border:  #F1A9AC;
  --status-info:           #0078D4;
  --status-info-bg:        #EFF6FC;
  --status-info-border:    #C7E0F4;
  --status-neutral:        #605E5C;
  --status-neutral-bg:     #F3F2F1;
  --status-neutral-border: #D2D0CE;

  /* ---- Semantic aliases: text ---- */
  --text-primary:    var(--neutral-144);
  --text-secondary:  var(--neutral-96);
  --text-tertiary:   var(--neutral-80);
  --text-disabled:   var(--neutral-64);
  --text-on-brand:   var(--neutral-white);
  --text-link:       var(--brand-primary);
  --text-link-hover: var(--brand-shade);

  /* ---- Semantic aliases: surfaces ---- */
  --surface-canvas:    #FAF9FB;   /* page background */
  --surface-primary:   var(--neutral-white); /* cards, panels, table rows */
  --surface-secondary: var(--neutral-16);    /* subtle fills, hover rows */
  --surface-nav:       var(--neutral-white);
  --surface-header:    var(--neutral-white);
  --surface-overlay:   rgba(0, 0, 0, 0.32);
  --surface-disabled:  var(--neutral-24);

  /* ---- Semantic aliases: borders ---- */
  --border-subtle:  var(--neutral-32);
  --border-default: var(--neutral-48);
  --border-strong:  var(--neutral-80);
  --border-focus:   var(--brand-primary);

  /* ---- Interactive states ---- */
  --brand-pressed: var(--brand-shade);
  --row-hover:     var(--neutral-16);
  --row-selected:  var(--brand-tint-30);
}