/*
 * Segmented control — SKIN. Edit this file per project, never the structure.
 * Scoped to the element's own class so a host app's :root cannot leak in.
 */

.sp-segmented {
  --ink: #292929;
  --ink-muted: #5d5d5d;
  --ink-faint: #9e9e9e;
  --surface: #ffffff;
  --surface-subtle: #f7f7f7;

  --radius-pill: 9999px;
  --icon-nav: 14px;

  --font-ui: "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tracking-ui: -0.15px;
  --text-xs: 12px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 200ms;

  /* Brandable */
  --sp-segmented-active: #ffffff;                       /* the selected pill */
  --sp-segmented-lift: 0 1px 3px rgba(0, 0, 0, 0.08);   /* what separates it from the trough */
  --sp-segmented-focus: #3b82f6;
}

:root.dark .sp-segmented,
[data-theme="dark"] .sp-segmented {
  --ink: #ededed;
  --ink-muted: #a5a5a5;
  --ink-faint: #767676;
  --surface: #1c1c1e;
  --surface-subtle: #161618;

  /* The trough darkens, so the selected pill has to go LIGHTER than its
     container to stay legible — inverting the light-mode relationship. */
  --sp-segmented-active: #2f2f33;
  --sp-segmented-lift: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ---- Brassword site: Brass appearance uses the app's warm charcoal ladder. */
:root.dark[data-theme="brass"] .sp-segmented {
  --ink: #f4f0e8;
  --ink-muted: #b9b2a5;
  --ink-faint: #7f786d;
  --surface: #2a2721;
  --surface-subtle: #171613;
  --surface-hover: #332f28;
  --border: #3b352b;
}
:root.dark[data-theme="brass"] .sp-segmented { --sp-segmented-active: #3b352b; }