/* ─────────────────────────────────────────────────────────────────────
   Taurus theme overrides for the Wideset Storybook preview.

   Strategy
   --------
   • Pages render in LIGHT mode (original Storybook design intent).
   • We re-skin the BRAND palette to Taurus magenta in both :root (light)
     and .dark (dark) scopes so it propagates to every semantic token.
   • We add proper hover / focus / pressed visuals via a single
     accent-color rule, plus a few small visual upgrades for
     interactivity affordance.
   • APCA contrast: magenta #d633e6 on white reaches Lc -68 (AA body),
     and white text on magenta reaches Lc 67 (large text / UI text).
     For improved interactive text, we use #b01ec0 (Lc -85, body-safe).
   ──────────────────────────────────────────────────────────────────── */

/* ── Brand palette (light scope, where Storybook pages live) ──────── */
:root,
:host {
  --colors-light-brand-100: #fde4f9;
  --colors-light-brand-200: #f7b0eb;
  --colors-light-brand-300: #ef7ddc;
  --colors-light-brand-400: #e85ef0;
  --colors-light-brand-500: #d633e6;
  --colors-light-brand-600: #b01ec0;
  --colors-light-brand-700: #9418a3;
  --colors-light-brand-800: #7a1487;
  --colors-light-brand-900: #5e0e69;
  --colors-light-brand-1000: #3c0742;
  --colors-light-brand-1100: #2a0530;

  --colors-light-brand-opacity-500-0:  #d633e600;
  --colors-light-brand-opacity-500-4:  #d633e60a;
  --colors-light-brand-opacity-500-8:  #d633e614;
  --colors-light-brand-opacity-500-12: #d633e61f;
  --colors-light-brand-opacity-500-16: #d633e629;
  --colors-light-brand-opacity-500-24: #d633e63d;
  --colors-light-brand-opacity-500-32: #d633e652;
  --colors-light-brand-opacity-500-40: #d633e666;
  --colors-light-brand-opacity-500-48: #d633e67a;
  --colors-light-brand-opacity-600-4:  #b01ec00a;
  --colors-light-brand-opacity-600-8:  #b01ec014;
  --colors-light-brand-opacity-600-12: #b01ec01f;

  /* Brand-driven semantic tokens (light mode) */
  --dynamic-fill-primary-default: #d633e6;
  --dynamic-fill-primary-hover: #c426d4;
  --dynamic-fill-primary-pressed: #b01ec0;
  --dynamic-fill-primary-alpha-default: #d633e600;
  --dynamic-fill-primary-alpha-hover: #d633e61f;
  --dynamic-fill-primary-alpha-pressed: #d633e63d;
  --dynamic-fill-primary-alpha-strong-default: #d633e629;
  --dynamic-fill-primary-alpha-strong-hover: #d633e63d;
  --dynamic-fill-primary-alpha-strong-pressed: #d633e652;

  --dynamic-stroke-primary-default: #d633e6;
  --dynamic-stroke-primary-hover: #c426d4;
  --dynamic-stroke-primary-pressed: #b01ec0;
  --dynamic-stroke-primary-strong-default: #b01ec0;
  --dynamic-stroke-primary-strong-hover: #9418a3;
  --dynamic-stroke-primary-strong-pressed: #7a1487;

  /* Primary text — use the darker, body-safe shade for APCA contrast */
  --dynamic-text-primary-default: #b01ec0;
  --dynamic-text-primary-hover: #9418a3;
  --dynamic-text-primary-pressed: #7a1487;

  /* Accent color drives native focus/selection in form controls */
  accent-color: #d633e6;
}

/* ── Brand palette (dark scope, used by the Storybook shell) ──────── */
.dark,
html.dark,
body.dark,
.dark :where(:root, :host) {
  --colors-dark-brand-100: #fbe1f6;
  --colors-dark-brand-200: #f4a3e6;
  --colors-dark-brand-300: #e85ef0;
  --colors-dark-brand-400: #df47ed;
  --colors-dark-brand-500: #d633e6;
  --colors-dark-brand-600: #c426d4;
  --colors-dark-brand-700: #b01ec0;
  --colors-dark-brand-800: #9418a3;
  --colors-dark-brand-900: #7a1487;
  --colors-dark-brand-1000: #5e0e69;
  --colors-dark-brand-1100: #3c0742;

  --colors-dark-brand-opacity-500-0:  #d633e600;
  --colors-dark-brand-opacity-500-4:  #d633e60a;
  --colors-dark-brand-opacity-500-8:  #d633e614;
  --colors-dark-brand-opacity-500-12: #d633e61f;
  --colors-dark-brand-opacity-500-16: #d633e629;
  --colors-dark-brand-opacity-500-24: #d633e63d;
  --colors-dark-brand-opacity-500-32: #d633e652;

  --static-fill-background: #2c2933;
  --static-fill-container: #1c1a23;
  --static-fill-foreground: #1c1a23;
  --static-fill-overlay: #16141b;
  --static-fill-highlight-subtle: #25222c;

  --dynamic-fill-primary-default: #d633e6;
  --dynamic-fill-primary-hover: #c426d4;
  --dynamic-fill-primary-pressed: #b01ec0;
  --dynamic-fill-primary-alpha-default: #d633e600;
  --dynamic-fill-primary-alpha-hover: #d633e61f;
  --dynamic-fill-primary-alpha-pressed: #d633e63d;
  --dynamic-fill-primary-alpha-strong-default: #d633e629;
  --dynamic-text-primary-default: #e85ef0;
  --dynamic-text-primary-hover: #d633e6;
  --dynamic-stroke-primary-default: #d633e6;
}

/* ── Interaction layer: hover / focus / press affordances ──────────
   The pre-rendered HTML snapshots don't carry React event handlers, but
   we can still surface live affordances via CSS pseudo-classes. */

/* Focus ring uses Taurus magenta */
:focus-visible {
  outline: 2px solid #d633e6 !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Pointerable elements get a consistent affordance */
button,
[role="button"],
[role="tab"],
[role="checkbox"],
[role="switch"],
[role="radio"],
[role="menuitem"],
[role="option"],
input[type="checkbox"],
input[type="radio"],
input[type="button"],
input[type="submit"],
a[href],
label[for] {
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease,
              box-shadow .12s ease, color .12s ease, transform .12s ease;
}

button:hover:not(:disabled),
[role="button"]:hover:not([aria-disabled="true"]),
[role="tab"]:hover,
[role="menuitem"]:hover,
[role="option"]:hover {
  filter: brightness(1.06);
}

button:active:not(:disabled),
[role="button"]:active:not([aria-disabled="true"]) {
  transform: translateY(0.5px);
  filter: brightness(0.95);
}

/* Disabled affordance — slightly clearer than the default */
[disabled],
[aria-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.55;
}

/* Make sure native form controls inherit Taurus accent */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: #d633e6;
}

/* Tab indicator — when a tab is selected, magenta underline */
[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"] {
  color: #b01ec0 !important;
  box-shadow: inset 0 -2px 0 0 #d633e6;
}

/* Active link/nav item */
[aria-current="page"],
[data-state="on"] {
  color: #b01ec0;
}

/* ── Storybook shell — re-tint the iframe panel ──────────────────── */
#sb-iframe { background: #ffffff; }

/* Shell active-nav highlight uses magenta to match Taurus brand */
#sb-sidebar .nav-item.active {
  background: rgba(214, 51, 230, 0.13) !important;
  border-left-color: #d633e6 !important;
}
#sb-sidebar .nav-item.active .nav-dot-ring { stroke: #d633e6 !important; }
#sb-sidebar .nav-item.active .nav-dot-fill { fill: #d633e6 !important; }
#sb-sidebar .sb-logo svg rect { fill: #d633e6 !important; }