/*
 * WorkBench brand tokens
 * Mirrors WB_new_design/tailwind.config.js so the old (Bootstrap 4 / Metronic)
 * app and the new React app share one visual language.
 */

/* Switzer, self-hosted — the previous `@import url('fonts.cdnfonts.com/...')`
   depends on a third-party CDN that gets blocked by ad-blockers, corporate
   proxies and some browser privacy settings, silently falling back to
   whatever generic sans-serif the OS substitutes. Serving the files
   ourselves removes that failure mode entirely. */
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand color */
  --wb-green: #38cb89;
  --wb-green-dark: #1d925d;
  --wb-green-lighter: rgba(56, 203, 137, 0.08);
  --wb-green-light: rgba(56, 203, 137, 0.5);
  --wb-green-rgb: 56, 203, 137;

  /* Backgrounds */
  --wb-bg: #f6f8f7;
  --wb-surface: #ffffff;

  /* Text */
  --wb-text: #54565b;
  --wb-text-light: #9aa29d;
  --wb-text-lighter: rgba(201, 200, 198, 0.4);
  --wb-border: #ecefed;

  /* Status colors (kept close to Bootstrap defaults so alerts/badges stay legible) */
  --wb-danger: #ff5630;
  --wb-warning: #ffab00;
  --wb-info: #3f6a83;
  --wb-success: var(--wb-green);

  /* Calm data-table palette — a quieter, more muted register than the
     brand green above, used only for table cards: row text, status pills,
     hover, and pagination. Deliberately separate tokens so this doesn't
     bleed into buttons/sidebar/etc, which stay on --wb-green. */
  --wb-table-title: #161d19;
  --wb-table-text: #1e2622;
  --wb-table-subtle: #9aa29d;
  --wb-table-row-hover: #fafcfb;
  --wb-table-header-rule: #eff2f0;
  --wb-table-row-rule: #f2f4f3;
  --wb-pill-success-bg: #e6f5ec;
  --wb-pill-success-text: #2e8b5b;
  --wb-pill-success-dot: #34a06a;
  --wb-pill-warning-bg: #fbf2df;
  --wb-pill-warning-text: #9a7318;
  --wb-pill-warning-dot: #c99a20;
  --wb-pill-danger-bg: #fdeaea;
  --wb-pill-danger-text: #d8484a;
  --wb-pill-danger-dot: #e4575a;
  --wb-pill-neutral-border: #e3e7e5;
  --wb-pill-neutral-text: #8c948f;
  --wb-pagination-active: #4fb183;
  --wb-filter-border: #6bc095;
  --wb-filter-text: #3e9e71;

  /* Radius scale */
  --wb-radius-sm: 0.5rem;
  --wb-radius-md: 0.75rem;
  --wb-radius-lg: 1rem;
  --wb-radius-xl: 1.125rem;
  --wb-radius-2xl: 1.75rem;
  --wb-radius-pill: 999px;

  /* Shadow scale */
  --wb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --wb-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --wb-shadow-lg: 0 15px 33px rgba(176, 183, 195, 0.16);

  /* Typography */
  --wb-font: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body,
.kt-wrapper,
.kt-body {
  font-family: var(--wb-font) !important;
  color: var(--wb-text);
  background-color: var(--wb-bg) !important;
}

h1, h2, h3, h4, h5, h6,
.kt-page-title, .kt-subheader__title {
  font-family: var(--wb-font);
  color: var(--wb-text);
}

a {
  color: var(--wb-green-dark);
}
a:hover {
  color: var(--wb-green);
}

::selection {
  background: var(--wb-green);
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: var(--wb-radius-pill);
  background-color: rgb(233, 230, 230);
}