/*
  kit-bridge.css: binds the Paces kit's own variables (prefix --theme-) to our design tokens
  (ADR-0002, CLAUDE.md §12). Loaded AFTER the kit, so at equal specificity these win, in light and
  dark alike: the tokens themselves switch under [data-bs-theme="dark"], and the admin's Appearance
  changes arrive through them.

  The kit keeps pre-computed tints for every colour (…-bg-subtle, …-text-emphasis); they are
  recomputed here from the token with color-mix, so a new colour brings its tints along. Never write
  a colour here: add a token instead.

  A Paces skin (data-skin, chosen on the Appearance screen) redefines these same variables on
  html[data-skin=x] and, for dark mode, [data-bs-theme=dark][data-skin=x]. The two extra selectors
  below have the same specificity and come later, so the colours, radius and font set on the
  Appearance screen always win; the skin keeps what it alone controls (type size, spacing, card
  borders, the side menu's styling).

  .bfau-theme-preview repeats the bindings: a custom property is resolved where it is declared, so
  bindings made only on :root would keep the page's values inside the Appearance preview box, whose
  own --bfau-* values are the admin's unsaved choices.
*/
:root,
html[data-skin],
[data-bs-theme][data-skin],
.bfau-theme-preview {
  /* Brand */
  --theme-primary: var(--bfau-primary);
  --theme-primary-rgb: var(--bfau-primary-rgb);
  /* Text and soft-badge ink: the text-safe brand colour, not the (button hover) emphasis fill. */
  --theme-primary-text-emphasis: var(--bfau-primary-text);
  --theme-primary-bg-subtle: var(--bfau-primary-subtle);
  --theme-primary-border-subtle: var(--bfau-primary-border-subtle);
  --theme-link-color: var(--bfau-link);
  --theme-link-color-rgb: var(--bfau-link-rgb);
  --theme-link-hover-color: color-mix(in srgb, var(--bfau-link) 80%, var(--bfau-text));
  --theme-secondary: var(--bfau-secondary);
  --theme-secondary-rgb: var(--bfau-secondary-rgb);
  /* 50/50 like success (below): at 85/15 the skins' pale second colours read 2.4 to 2.9:1 (BFAUCRM-141). */
  --theme-secondary-text-emphasis: color-mix(in srgb, var(--bfau-secondary) 50%, var(--bfau-text));
  --theme-secondary-bg-subtle: color-mix(in srgb, var(--bfau-secondary) 15%, var(--bfau-surface));
  --theme-secondary-border-subtle: color-mix(in srgb, var(--bfau-secondary) 40%, var(--bfau-surface));
  --theme-focus-ring-color: var(--bfau-focus-ring);

  /* Status */
  --theme-success: var(--bfau-success);
  --theme-success-rgb: var(--bfau-success-rgb);
  /* 50/50 (not 85/15): the staff visual guard measured the badge/icon/button text these feed —
     .badge-soft-success, .text-success, .btn-soft-success (see admin.css) — at ~2.4:1 on white with
     the shallower 85/15 mix, short of the 3:1 floor for icons/UI text. 50/50 clears 3:1 for success
     and info with room, and still clears it for warning (the palest of the three), while the mix
     itself stays relative to --bfau-text (so it still self-adjusts per skin and per mode, dark
     included — only light mode measured short). */
  --theme-success-text-emphasis: color-mix(in srgb, var(--bfau-success) 50%, var(--bfau-text));
  --theme-success-bg-subtle: color-mix(in srgb, var(--bfau-success) 15%, var(--bfau-surface));
  --theme-success-border-subtle: color-mix(in srgb, var(--bfau-success) 40%, var(--bfau-surface));
  --theme-warning: var(--bfau-warning);
  --theme-warning-rgb: var(--bfau-warning-rgb);
  --theme-warning-text-emphasis: color-mix(in srgb, var(--bfau-warning) 45%, var(--bfau-text));
  --theme-warning-bg-subtle: color-mix(in srgb, var(--bfau-warning) 15%, var(--bfau-surface));
  --theme-warning-border-subtle: color-mix(in srgb, var(--bfau-warning) 40%, var(--bfau-surface));
  --theme-danger: var(--bfau-danger);
  --theme-danger-rgb: var(--bfau-danger-rgb);
  /* 50/50 too since BFAUCRM-141: 85/15 cleared 3:1 for the default red only; Aurora, Crystal and other
     skins' paler reds measured 2.5 to 2.8:1 on their tints. */
  --theme-danger-text-emphasis: color-mix(in srgb, var(--bfau-danger) 50%, var(--bfau-text));
  --theme-danger-bg-subtle: color-mix(in srgb, var(--bfau-danger) 15%, var(--bfau-surface));
  --theme-danger-border-subtle: color-mix(in srgb, var(--bfau-danger) 40%, var(--bfau-surface));
  --theme-info: var(--bfau-info);
  --theme-info-rgb: var(--bfau-info-rgb);
  --theme-info-text-emphasis: color-mix(in srgb, var(--bfau-info) 50%, var(--bfau-text));
  --theme-info-bg-subtle: color-mix(in srgb, var(--bfau-info) 15%, var(--bfau-surface));
  --theme-info-border-subtle: color-mix(in srgb, var(--bfau-info) 40%, var(--bfau-surface));

  /* Surfaces and text */
  --theme-body-bg: var(--bfau-body-bg);
  --theme-body-bg-rgb: var(--bfau-body-bg-rgb);
  --theme-tertiary-bg: var(--bfau-body-bg);
  --theme-tertiary-bg-rgb: var(--bfau-body-bg-rgb);
  --theme-secondary-bg: var(--bfau-surface);
  --theme-secondary-bg-rgb: var(--bfau-surface-rgb);
  --theme-border-color: var(--bfau-border);
  --theme-body-color: var(--bfau-text);
  --theme-body-color-rgb: var(--bfau-text-rgb);
  --theme-secondary-color: var(--bfau-text-muted);
  --theme-secondary-color-rgb: var(--bfau-text-muted-rgb);

  /* Light surfaces. Vivid, Material, Retro, Mono and Galaxy keep their LIGHT values of these in dark
     mode, so table headers (.bg-light-subtle) and note alerts (.alert-light) stayed pale under light
     text (1.5 to 2.2:1, BFAUCRM-144). Derive them from the page's own text and surface instead, so
     they follow the mode on every skin. */
  --theme-light-bg-subtle: color-mix(in srgb, var(--bfau-text) 7%, var(--bfau-surface));
  --theme-light-border-subtle: color-mix(in srgb, var(--bfau-text) 16%, var(--bfau-surface));
  --theme-light-text-emphasis: var(--bfau-text);

  /* Sign-in panel: the gradient's far end, darkened toward ink. The skins' light brand colours (gold,
     sage, coral) put the panel's white text at 1.7 to 3.5:1 on the raw end colour (BFAUCRM-147). */
  --bfau-auth-panel-end: color-mix(in srgb, var(--bfau-auth-panel-to) 50%, var(--bfau-photo-ink));

  /* Shape */
  --theme-border-radius: var(--bfau-radius);
  --theme-border-radius-sm: calc(var(--bfau-radius) * 0.8);
  --theme-border-radius-lg: var(--bfau-radius-lg);
  --theme-box-shadow: var(--bfau-shadow);

  /* Type */
  --theme-font-sans-serif: var(--bfau-font-sans);
  --theme-font-family-secondary: var(--bfau-font-heading);
  --theme-body-font-family: var(--bfau-font-sans);
}

.btn-primary {
  --theme-btn-bg: var(--bfau-primary);
  --theme-btn-border-color: var(--bfau-primary-border);
  --theme-btn-color: var(--bfau-on-primary);
  --theme-btn-hover-color: var(--bfau-on-primary);
  --theme-btn-hover-bg: var(--bfau-primary-emphasis);
  --theme-btn-hover-border-color: var(--bfau-primary-emphasis);
  --theme-btn-active-color: var(--bfau-on-primary);
  --theme-btn-active-bg: var(--bfau-primary-emphasis);
  --theme-btn-active-border-color: var(--bfau-primary-emphasis);
  --theme-btn-disabled-color: var(--bfau-on-primary);
  --theme-btn-disabled-bg: var(--bfau-primary);
  --theme-btn-disabled-border-color: var(--bfau-primary-border);
}

.card {
  --theme-card-bg: var(--bfau-surface);
  --theme-card-border-radius: var(--bfau-radius-lg);
  --theme-card-box-shadow: var(--bfau-shadow);
}

/*
  Galaxy, dark mode (BFAUCRM-143). The kit paints this skin's cards, footer and top bar as a faint
  white wash (rgba(255,255,255,.06), rgba(229,243,255,.1)) laid over a photo and gradient on <body>.
  Over anything but that photo the wash reads as a pale panel under light text (2.0:1), and the
  visual guard, which measures the colour behind the text, cannot see through it. Bind the same
  elements to solid dark tokens instead; the skin keeps its dashed card borders and fonts.
*/
html[data-skin="galaxy"][data-bs-theme="dark"] body {
  background: var(--bfau-body-bg);
}

html[data-skin="galaxy"][data-bs-theme="dark"] .card,
html[data-skin="galaxy"][data-bs-theme="dark"] .card-bg,
html[data-skin="galaxy"][data-bs-theme="dark"] .dropzone,
html[data-skin="galaxy"][data-bs-theme="dark"] .filepond--panel-root,
html[data-skin="galaxy"][data-bs-theme="dark"] .footer {
  background-color: var(--bfau-surface);
}

html[data-skin="galaxy"][data-bs-theme="dark"] .choices__inner,
html[data-skin="galaxy"][data-bs-theme="dark"] .form-control,
html[data-skin="galaxy"][data-bs-theme="dark"] .form-select,
html[data-skin="galaxy"][data-bs-theme="dark"] .select2-container .select2-selection--multiple,
html[data-skin="galaxy"][data-bs-theme="dark"] .select2-container .select2-selection--single {
  background-color: color-mix(in srgb, var(--bfau-text) 6%, var(--bfau-surface));
}

html[data-skin="galaxy"][data-bs-theme="dark"][data-topbar-color] {
  --theme-topbar-bg: var(--bfau-surface);
  --theme-topbar-search-bg: color-mix(in srgb, var(--bfau-text) 6%, var(--bfau-surface));
  --theme-topbar-search-border: var(--bfau-border);
}

html[data-skin="galaxy"][data-bs-theme="dark"] .app-topbar.topbar-active {
  background-color: var(--bfau-surface);
}

/*
  Crystal, Mono and Prism clear the background of every .nav-link.active with !important, so the
  selected pill (Appearance's light/dark switch and the other pill tabs) kept its on-primary label
  on the bare page: invisible (BFAUCRM-145). Give the pill its brand colour back in every skin; one
  more class than the skins' rule, so it wins whichever skin is on.
*/
html[data-skin] .nav-pills .nav-link.active,
html[data-skin] .nav-pills .show > .nav-link {
  background-color: var(--theme-nav-pills-link-active-bg) !important;
}

/*
  Side menu and top bar text (BFAUCRM-147). The kit hard-codes each skin's entry, hover and selected
  colours per menu colour: grey, picture and gradient menus read 2.9 to 4.2:1, and on a light menu a
  skin's pale brand colour marks the hovered and selected entry at 2.0 to 4.3:1. The text is chosen
  here per menu colour, from the ink and white tokens, so it holds on every skin:
    - dark, picture, gradient menus (and light/grey menus, which turn dark in dark mode) get light text;
    - light and grey menus in light mode get ink, and a deep tint of the brand colour for the hovered
      and selected entry (a 50% mix with ink, so even a pale gold stays above 4.5:1).
  The menus' backgrounds stay the kit's. Three repeated attribute selectors match the most specific
  kit rule (html[data-skin][data-bs-theme][data-menu-color]); the light-mode blocks add the theme attribute to win.
*/
html[data-menu-color="dark"][data-menu-color][data-menu-color],
html[data-menu-color="light"][data-menu-color][data-menu-color],
html[data-menu-color="gray"][data-menu-color][data-menu-color] {
  --theme-sidenav-item-color: color-mix(in srgb, var(--bfau-photo-text) 88%, transparent);
  --theme-sidenav-item-hover-color: var(--bfau-photo-text);
  --theme-sidenav-item-active-color: var(--bfau-photo-text);
}

/* Picture and gradient menus are mid-tone in some skins: full white, no fade. */
html[data-menu-color="gradient"][data-menu-color][data-menu-color],
html[data-menu-color="image"][data-menu-color][data-menu-color] {
  --theme-sidenav-item-color: var(--bfau-photo-text);
  --theme-sidenav-item-hover-color: var(--bfau-photo-text);
  --theme-sidenav-item-active-color: var(--bfau-photo-text);
}

html[data-menu-color="light"][data-menu-color][data-menu-color][data-bs-theme="light"],
html[data-menu-color="gray"][data-menu-color][data-menu-color][data-bs-theme="light"],
html[data-skin="saas"][data-bs-theme="dark"][data-menu-color="gray"][data-menu-color],
html[data-skin="flat"][data-bs-theme="dark"][data-menu-color="gray"][data-menu-color] {
  --theme-sidenav-item-color: color-mix(in srgb, var(--bfau-photo-ink) 78%, transparent);
  --theme-sidenav-item-hover-color: color-mix(in srgb, var(--bfau-primary-text) 50%, var(--bfau-photo-ink));
  --theme-sidenav-item-active-color: color-mix(in srgb, var(--bfau-primary-text) 50%, var(--bfau-photo-ink));
}

/* Prism's light menu marks the selected entry with a dark pill (the kit's own #2b313b, white text) and
   also paints a hovered one that dark, which ink text cannot read. Keep the dark selected pill, make
   the hover a light brand tint. */
html[data-skin="prism"][data-menu-color="light"][data-bs-theme="light"][data-menu-color] {
  --theme-sidenav-item-active-color: var(--bfau-photo-text);
  --theme-sidenav-item-hover-bg: color-mix(in srgb, var(--bfau-primary) 12%, transparent);
}

/* Neo's gradient menu starts at a mid blue (#4f7fb3) that white text only reaches 4.1:1 on: derive it
   from the brand colour and ink instead, so it stays a brand gradient and stays dark enough. */
html[data-skin="neo"][data-menu-color="gradient"][data-menu-color][data-menu-color] {
  --theme-sidenav-bg: linear-gradient(90deg, color-mix(in srgb, var(--bfau-primary) 55%, var(--bfau-photo-ink)), color-mix(in srgb, var(--bfau-primary) 35%, var(--bfau-photo-ink)));
}

/* Top bar icons and the account name: the kit's grey (#909ba5 on Elegant and Neo, 2.8:1), its 70%
   white on Neo's gradient (2.9:1) and its pale brand colour on hover (Soft, Zen, Luxe, Elegant). */
html[data-topbar-color][data-topbar-color][data-topbar-color] {
  --theme-topbar-item-color: color-mix(in srgb, var(--bfau-photo-text) 88%, transparent);
  --theme-topbar-item-hover-color: var(--bfau-photo-text);
}

html[data-topbar-color="light"][data-topbar-color][data-topbar-color][data-bs-theme="light"],
html[data-topbar-color="gray"][data-topbar-color][data-topbar-color][data-bs-theme="light"] {
  --theme-topbar-item-color: color-mix(in srgb, var(--bfau-photo-ink) 72%, transparent);
  --theme-topbar-item-hover-color: color-mix(in srgb, var(--bfau-primary-text) 50%, var(--bfau-photo-ink));
}