:root {
  /* ---- Base palette ---- */
  --ab-orange-50:  #fff2ec;
  --ab-orange-100: #ffe0d1;
  --ab-orange-200: #ffbfa3;
  --ab-orange-300: #ff9970;
  --ab-orange-400: #ff7038;
  --ab-orange-500: #fe4c00; /* brand impact color */
  --ab-orange-600: #d84200;
  --ab-orange-700: #a83300;
  --ab-orange-800: #7a2500;

  --ab-black:      #1a1a1a;
  --ab-gray-900:   #2b2b2b;
  --ab-gray-700:   #4a4a4a;
  --ab-gray-500:   #767676;
  --ab-gray-300:   #c8c8c8;
  --ab-gray-100:   #ececec;
  --ab-off-white:  #faf9f7;
  --ab-white:      #ffffff;

  /* ---- Semantic aliases ---- */
  --color-bg-page:        var(--ab-white);
  --color-bg-subtle:      var(--ab-off-white);
  --color-bg-inverse:     var(--ab-black);
  --color-bg-accent:      var(--ab-orange-500);
  --color-bg-accent-soft: var(--ab-orange-50);

  --color-text-primary:   var(--ab-black);
  --color-text-secondary: var(--ab-gray-700);
  --color-text-muted:     var(--ab-gray-500);
  --color-text-inverse:   var(--ab-white);
  --color-text-accent:    var(--ab-orange-500);

  --color-border-subtle:  var(--ab-gray-100);
  --color-border-default: var(--ab-gray-300);
  --color-border-inverse: rgba(255,255,255,0.16);

  --color-accent:         var(--ab-orange-500);
  --color-accent-hover:   var(--ab-orange-600);
  --color-accent-active:  var(--ab-orange-700);
  --color-accent-soft:    var(--ab-orange-50);

  --color-focus-ring: rgba(254,76,0,0.35);
}