/**
 * Toggle Button — Design Tokens
 * Source: Carbon DS (My Copy), White Theme — fileKey qC6IO6sOCk9HoVEo3coiwV
 * Exported from Figma variables (CDS-White_Theme_tokens.json) — resolved hex values below.
 *
 * This file is the single source of truth consumed by every framework
 * implementation (React, Angular, Vue, vanilla). Do not hardcode color
 * values in component files — reference these custom properties instead.
 *
 * Three tokens below are flagged KNOWN ISSUE: raw values in Carbon's own
 * source file, not true variable aliases. Documented, not fixed — see
 * DS-Demo-Toggle-Button-Construction-Spec.md, "Known Issues." Resolved hex
 * is correct and matches the aliased value; only the JSON-level binding
 * is broken upstream in Carbon.
 */

:root {
  /* On state (mirrors Primary button tokens) */
  --toggle-btn-on-bg: #0f62fe;              /* Button/button-primary */
  --toggle-btn-on-bg-hover: #0050e6;        /* Button/button-primary-hover */
  --toggle-btn-on-bg-active: #002d9c;       /* Button/button-primary-active */
  --toggle-btn-on-icon: #ffffff;            /* Icon/icon-on-color (white, on filled bg) */

  /* Off state (Tertiary's outlined-enabled look, via generic interactive tokens) */
  --toggle-btn-off-bg: #ffffff;             /* Background/background */
  --toggle-btn-off-border: #0f62fe;         /* Border/border-interactive */
  --toggle-btn-off-icon: #0f62fe;           /* Icon/icon-interactive */

  /* KNOWN ISSUE: raw value in Carbon source, not aliased. Matches Default/Gray/50. */
  --toggle-btn-off-bg-hover: rgba(141, 141, 141, 0.12);   /* Background/background-hover */
  /* KNOWN ISSUE: raw value in Carbon source, not aliased. Matches Default/Gray/50. */
  --toggle-btn-off-bg-active: rgba(141, 141, 141, 0.5);   /* Background/background-active */

  /* Focus (double-ring on On/filled, single-ring on Off/unfilled — see spec) */
  --toggle-btn-focus-outer: #0f62fe;        /* Focus/focus */
  --toggle-btn-focus-inset: #ffffff;        /* Focus/focus-inset */
  --toggle-btn-focus-ring-width: 2px;
  --toggle-btn-focus-inset-width: 1px;

  /* Disabled */
  --toggle-btn-disabled-bg: #c6c6c6;              /* Button/button-disabled */
  --toggle-btn-on-disabled-icon: #8d8d8d;         /* Text/text--on-color-disabled */
  /* KNOWN ISSUE: raw value in Carbon source, not aliased. Matches Default/Gray/100. */
  --toggle-btn-off-disabled-icon: rgba(22, 22, 22, 0.25); /* Icon/icon-disabled */
  --toggle-btn-off-disabled-border: #c6c6c6;      /* Button/button-disabled (corrected Aug 18 — see spec) */

  /* Skeleton (bonus state) */
  --toggle-btn-skeleton-bg: #e8e8e8;        /* Miscellaneous/skeleton-background */
  --toggle-btn-skeleton-element: #c6c6c6;   /* Miscellaneous/skeleton-element */

  /* Structural — not in Figma token set; component-local constants.
     Size is not spec-locked in the construction spec; 48px follows
     Carbon's standard large icon-button size. Override at integration
     time if the consuming org's spacing scale calls for 32/40px instead. */
  --toggle-btn-size: 48px;
  --toggle-btn-icon-size: 20px;
  --toggle-btn-border-width: 1px;
}