/*
 * Design tokens: the semantic values the common Admin UI uses, layered on Sneat's Bootstrap variables.
 *
 *   Common UI (admin.css, Sneat core)  ->  design tokens (this file)  ->  client theme values (Branding)
 *
 * The client brand color is supplied at runtime by the layout as --app-brand-primary and
 * --app-brand-primary-rgb (PrimaryColor in the active client's Branding/{Alias}.json); without it the neutral
 * Sneat color is kept.
 * V1 is light only. A dark theme later only redefines these tokens under [data-bs-theme=dark].
 */

:root,
[data-bs-theme=light] {
  --app-font-latin: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --app-font-arabic: "Noto Sans Arabic", "Public Sans", "Segoe UI", Tahoma, Arial, sans-serif;

  --app-coming-soon-bg: var(--bs-secondary-bg-subtle);
  --app-coming-soon-color: var(--bs-secondary-color);
  --app-stat-icon-bg: var(--bs-primary-bg-subtle);
  --app-stat-icon-color: var(--bs-primary);

  /* Specification boxes (Product, Product Type and Product Group forms). */
  --app-spec-border: rgba(var(--bs-primary-rgb), 0.22);
  --app-spec-accent: var(--bs-primary);
  --app-spec-header-bg: rgba(var(--bs-primary-rgb), 0.07);
  --app-spec-header-border: rgba(var(--bs-primary-rgb), 0.16);
}

/* Language-specific font. */
html[lang=ar] {
  --bs-font-sans-serif: var(--app-font-arabic);
}

html:not([lang=ar]) {
  --bs-font-sans-serif: var(--app-font-latin);
}

/* Client brand color, applied only when the deployment configures one. */
html.app-branded {
  --bs-primary: var(--app-brand-primary);
  --bs-primary-rgb: var(--app-brand-primary-rgb);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-paper-bg) 84%, var(--app-brand-primary));
  --bs-primary-border-subtle: rgba(var(--app-brand-primary-rgb), 0.38);
  --bs-link-color: var(--app-brand-primary);
  --bs-link-color-rgb: var(--app-brand-primary-rgb);
  --bs-link-hover-color: color-mix(in srgb, var(--app-brand-primary) 90%, #000);
}