/* ── Electric accent layer ───────────────────────────────────────────────
   A deliberately vibrant subset of the kit's OWN color ramps, repointing the
   interactive semantic tokens so buttons, nav, selection, focus, progress and
   status POP against light surfaces. Surfaces stay white / grey-150.

   This intentionally moves off the muted default (orange primary / standard
   blue) toward an alive, electric identity. Text colors stay AA-readable;
   only fills use the brightest swatches.
   Loaded last from styles.css, so these win over fig-tokens.css.

   The selector list mirrors EVERY theme scope fig-tokens.css defines
   (`:root[data-theme="light"]`, `.light`, dark, classic). fig-tokens.css
   redefines the interactive tokens under those scoped selectors (higher
   specificity than a plain `:root`), and the DS runtime stamps
   `data-theme="light"` on <html> by default — so a plain `:root` here would
   LOSE to `:root[data-theme="light"] { --background-control-checked: blue }`.
   Matching the scope specificity + loading last is what makes purple win.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Dark-theme neutraliser ───────────────────────────────────────────────
   Brand intent (below) is "light & airy white, in EVERY theme". The base kit's
   dark theme repoints text tokens to LIGHT ramp steps and surfaces to DARK ones
   — but this accent layer forces surfaces white in all scopes, which left light
   text on white (e.g. tab labels at ~1.5:1) whenever a host sets data-theme=dark.
   This block repoints the dark scope's neutrals to the SAME values the light
   theme uses, so dark renders identically to the airy light brand and stays
   readable. Brand accents (violet links/CTAs/status) are re-applied by the
   shared block that follows, which wins on source order.
   ──────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"], .dark {
  --background-button-flashbar: var(--white);
  --background-button-normal-default: var(--white);
  --background-button-normal-default-2: var(--white);
  --background-button-normal-disabled: var(--white);
  --background-button-primary-disabled: var(--white);
  --background-calendar-today: var(--grey-150);
  --background-cell-shaded: var(--grey-150);
  --background-code-editor-gutter-active-line-default: var(--grey-550);
  --background-code-editor-gutter-default: var(--grey-150);
  --background-code-editor-status-bar: var(--grey-150);
  --background-container-content: var(--white);
  --background-control-checked: var(--blue-600);
  --background-control-default: var(--white);
  --background-control-disabled: var(--grey-300);
  --background-dropdown-item-default: var(--white);
  --background-dropdown-item-filter-match: var(--blue-100);
  --background-dropdown-item-hover: var(--grey-150);
  --background-dropdown-item-hover-2: var(--grey-150);
  --background-input-default: var(--white);
  --background-input-default-2: var(--white);
  --background-input-disabled: var(--grey-200);
  --background-input-disabled-2: var(--grey-200);
  --background-item-selected: var(--blue-100);
  --background-layout-main: var(--white);
  --background-layout-toggle-selected-active: var(--blue-600);
  --background-notification-grey: var(--grey-600);
  --background-popover: var(--white);
  --background-progress-bar-content-default: var(--blue-600);
  --background-progress-bar-content-default-2: var(--blue-600);
  --background-progress-bar-layout-default: var(--grey-200);
  --background-progress-bar-layout-default-2: var(--grey-200);
  --background-severity-critical: rgb(125,33,5);
  --background-severity-high: rgb(186,46,15);
  --background-severity-low: rgb(178,145,28);
  --background-severity-medium: rgb(204,95,33);
  --background-severity-neutral: var(--grey-600);
  --background-status-info: var(--blue-100);
  --background-tiles-disabled: var(--grey-200);
  --background-toggle-button-normal-pressed: var(--grey-200);
  --background-toggle-checked-disabled: var(--blue-300);
  --background-toggle-default: var(--grey-600);
  --border-button-flashbar-blue: var(--grey-600);
  --border-button-flashbar-green: var(--grey-600);
  --border-button-flashbar-red: var(--grey-600);
  --border-button-normal-default: var(--grey-600);
  --border-button-normal-default-2: var(--grey-600);
  --border-button-normal-disabled: var(--grey-300);
  --border-button-normal-disabled-2: var(--grey-400);
  --border-code-editor-default: var(--grey-300);
  --border-divider-default: var(--grey-350);
  --border-dropdown-container: var(--grey-400);
  --border-dropdown-item-hover: var(--grey-500);
  --border-item-selected: var(--blue-600);
  --border-layout: var(--grey-300);
  --border-popover: var(--grey-400);
  --border-status-info: var(--blue-600);
  --border-status-warning: var(--yellow-800);
  --border-tabs-divider: var(--grey-400);
  --border-toggle-button-normal-pressed: var(--grey-600);
  --foreground-control-disabled: var(--white);
  --foreground-control-read-only: var(--grey-550);
  --shadow-dropdown-color: rgba(0,7,22,0.1);
  --stroke-code-editor-resize-handler: var(--grey-600);
  --text-accent: var(--blue-600);
  --text-body-default: var(--grey-900);
  --text-body-default-2: var(--grey-900);
  --text-body-secondary: var(--grey-600);
  --text-breadcrumb-current: var(--grey-550);
  --text-breadcrumb-icon: var(--grey-550);
  --text-button-flashbar-blue: var(--grey-600);
  --text-button-flashbar-green: var(--grey-600);
  --text-button-flashbar-red: var(--grey-600);
  --text-button-normal-default: var(--grey-600);
  --text-button-normal-default-2: var(--grey-600);
  --text-button-primary-default-2: var(--white);
  --text-code-editor-gutter-active-line: var(--white);
  --text-code-editor-status-bar-disabled: var(--grey-500);
  --text-counter: var(--grey-550);
  --text-disabled: var(--grey-400);
  --text-dropdown-item-filter-match: var(--blue-600);
  --text-form-default: var(--grey-900);
  --text-form-secondary: var(--grey-550);
  --text-form-secondary-2: var(--grey-550);
  --text-heading-default: var(--grey-900);
  --text-input-disabled: var(--grey-500);
  --text-input-placeholder: var(--grey-550);
  --text-input-placeholder-2: var(--grey-550);
  --text-interactive-default: var(--grey-600);
  --text-interactive-disabled: var(--grey-400);
  --text-interactive-disabled-2: var(--grey-400);
  --text-interactive-hover: var(--grey-900);
  --text-link-default: var(--blue-600);
  --text-link-default-2: var(--blue-600);
  --text-severity-critical: var(--grey-100);
  --text-severity-high: var(--grey-100);
  --text-small: var(--grey-550);
  --text-small-2: var(--grey-550);
  --text-status-error: var(--red-600);
  --text-status-error-2: var(--red-600);
  --text-status-inactive: var(--grey-550);
  --text-status-inactive-2: var(--grey-550);
  --text-status-info: var(--blue-600);
  --text-status-info-2: var(--blue-600);
  --text-status-success: var(--green-600);
  --text-status-success-2: var(--green-600);
  --text-status-warning: var(--yellow-800);
  --text-status-warning-2: var(--yellow-800);
  --text-toggle-button-icon-pressed: var(--grey-900);
  --text-toggle-button-normal-pressed: var(--grey-900);
}

:root,
:root[data-theme="light"], .light,
:root[data-theme="dark"], .dark,
:root[data-mode="classic"] {
  /* Andrew brand palette (from "Off Site Colors" — ADA compliant) */
  --electric-violet: rgb(103,0,206);    /* #6700CE Purple — primary   */
  --kit-light-purple: rgb(203,144,255);/* #CB90FF light purple            */
  --kit-yellow: rgb(246,222,0);        /* #F6DE00 secondary accent        */
  --kit-accent-orange: rgb(255,155,68);       /* #FF9B44 secondary accent        */
  --kit-ink-b: rgb(22,29,38);           /* #161D26 dark text / chrome      */
  --electric-blue:   rgb(0,152,248);    /* interactive fills, focus, rings */
  --electric-green:  rgb(41,196,103);   /* positive                       */
  --electric-red:    rgb(246,56,52);    /* negative                       */
  --electric-amber:  rgb(255,177,74);   /* warning fills                  */
  --electric-cyan:   rgb(15,163,255);   /* secondary interactive highlight */

  --background-button-primary-hover: color-mix(in srgb, var(--electric-violet) 88%, black);

  /* disabled primary: darker muted label so the pair reads clearly on the
     light neutral fill (grey-500 #7D8998 on grey-200 was ~3:1 and muddy) */
  --text-button-primary-disabled: var(--grey-550);

  /* Light & airy: white chrome, soft hairlines, colorful accents float on it */
  --background-home-header: #fff;
  /* LOSE THE DARK CHROME — top nav + page-header hero go white, not squid-ink.
     Text on them switches to dark in the components for AA contrast. */
  --background-top-navigation:      #fff;
  --background-layout-panel-content: #fff;
  --border-active:                  var(--electric-violet);
  --border-divider-default: var(--grey-200);
  --border-layout: var(--grey-200);
  --border-input-default: var(--grey-400);

  /* primary CTA → electric violet with white label */
  --background-button-primary-default:   var(--electric-violet);
  --background-button-primary-default-2:  var(--electric-violet);
  --text-button-primary-default:   var(--white);
  --text-button-primary-default-2:  var(--white);

  /* interactive fills / rings / selection → electric blue */
  --background-control-checked:            var(--electric-violet);
  --border-control-checked:                var(--electric-violet);
  --border-item-selected:                  var(--electric-violet);
  --border-dropdown-item-selected:         var(--electric-violet);
  --background-layout-toggle-selected-active: var(--electric-violet);
  --background-progress-bar-content-default:   var(--electric-violet);
  --background-progress-bar-content-default-2:  var(--electric-violet);
  --border-tabs-underline:                 var(--electric-violet);
  --background-toggle-button-normal-pressed: rgb(244,236,255); /* light-purple tint */
  --border-toggle-button-normal-pressed:   var(--electric-violet);

  /* secondary (normal) button → purple outline */
  --border-button-normal-default:   var(--electric-violet);
  --border-button-normal-default-2:  var(--electric-violet);

  /* selected surface tint — soft light-purple wash */
  --background-item-selected: rgb(244,236,255);
  --background-status-info:   rgb(244,236,255);

  /* status FILLS that carry light text → readable brand-deep colors
     (white text on the brightest electric swatches fails AA; keep the neon
      for non-text accents: primary CTA, controls, progress, focus, selection) */
  /* info / "blue" notification FILL → Purple (NO blue anywhere in brand).
     White text on #6700CE clears AA at ~8:1. */
  --background-notification-blue:   var(--electric-violet);
  --background-notification-green:  var(--green-600);
  --background-notification-red:    var(--red-600);
  --background-notification-yellow: rgb(255,206,18);
  --background-notification-grey:   var(--grey-600);

  /* interactive TEXT / links → electric VIOLET (vibrant AND AA-readable on
     white at ~7:1) — deliberately NOT the muted dark blue. */
  --text-accent:            var(--electric-violet);
  --text-link-default:      var(--electric-violet);
  --text-link-default-2:    var(--electric-violet);
  --text-button-normal-default:   var(--electric-violet);
  --text-button-normal-default-2:  var(--electric-violet);
  --border-tabs-underline:  var(--electric-violet);
  /* darker secondary text so descriptions / counters read clearly */
  --text-body-secondary:    var(--grey-700);
  --text-form-secondary:    var(--grey-700);
  --text-form-secondary-2:  var(--grey-700);
  --text-counter:           var(--grey-700);
  --text-breadcrumb-current: var(--grey-700);
  --text-status-success:    var(--green-600);
  --text-status-error:      var(--red-600);
  /* info / in-progress status glyph+label → Purple, never blue */
  --text-status-info:       var(--electric-violet);
  /* warning: vivid readable orange instead of the muddy mustard-brown */
  --text-status-warning:    var(--base-color-orange-55);   /* rgb(229,79,0) */
  --text-status-warning-2:  var(--base-color-orange-55);
  --border-status-warning:  var(--base-color-orange-55);
}