/* ============================================================================
   React Spectrum (Spectrum 2) — Semantic color aliases
   These are the tokens you should reach for in product UI. They reference the
   raw scales in colors.css and flip automatically between light and dark.
   Source: @adobe/spectrum-tokens color-aliases.json
   ============================================================================ */

:root {
  /* Backgrounds — application framing layers */
  --background-base:        var(--gray-25);   /* deepest layer */
  --background-layer-1:     var(--gray-50);
  --background-layer-2:     var(--gray-25);
  --background-elevated:    var(--gray-25);    /* popovers, cards raised off page */

  /* Neutral / gray semantic backgrounds */
  --neutral-background:            var(--gray-700);
  --neutral-subdued-background:    var(--gray-600);
  --gray-subtle-background:        var(--gray-100);

  /* Accent (blue) — the primary brand action color */
  --accent-background:      var(--accent-color-900);
  --accent-background-hover:var(--accent-color-1000);
  --accent-background-down: var(--accent-color-1000);
  --accent-subtle-background:var(--accent-color-200);

  /* Semantic status backgrounds */
  --negative-background:    var(--negative-color-900);
  --positive-background:    var(--positive-color-900);
  --notice-background:      var(--notice-color-900);
  --informative-background: var(--informative-color-900);
  --negative-subtle-background: var(--red-200);
  --positive-subtle-background: var(--green-200);
  --notice-subtle-background:   var(--orange-200);
  --informative-subtle-background: var(--blue-200);

  /* Text / content colors */
  --heading-color:          var(--gray-900);
  --title-color:            var(--gray-900);
  --body-color:             var(--gray-800);
  --detail-color:           var(--gray-700);
  --code-color:             var(--gray-800);
  --neutral-content:        var(--gray-800);
  --neutral-subdued-content:var(--gray-700);
  --accent-content:         var(--accent-color-900);
  --negative-content:       var(--negative-color-900);
  --disabled-content:       var(--gray-400);

  /* Borders */
  --field-border-color:     var(--gray-400);   /* input/field default border */
  --decorative-border-color:var(--gray-300);   /* framing / dividers */
  --strong-border-color:    var(--gray-800);
  --negative-border-color:  var(--negative-color-800);
  --disabled-border-color:  var(--gray-200);

  /* Fills for icons / visualizations */
  --neutral-visual-color:   var(--gray-500);

  /* Disabled surfaces */
  --disabled-background:    var(--gray-100);

  /* Focus indicator */
  --focus-indicator-color:  var(--blue-800);

  /* Convenience: default page bg + text (light) */
  --surface:                var(--gray-100);
  --surface-card:           var(--gray-25);
  --text:                   var(--gray-800);
  --text-heading:           var(--gray-900);
}