/* =============================================================
 * Knowyn Design Tokens
 * Loaded after Bootstrap 5 (CDN). Builds tonal scales on the
 * brand colors, adds spacing/typography/elevation/motion/z-index
 * scales, and overrides matching Bootstrap 5 CSS variables so
 * default utilities (e.g. .bg-primary, .text-primary) inherit
 * the brand palette.
 * ============================================================= */

:root {
  /* -----------------------------------------------------------
   * Color — Primary scale (base = #346CB0)
   * --------------------------------------------------------- */
  --color-primary-50:  #eef3fa;
  --color-primary-100: #d6e3f2;
  --color-primary-200: #adc6e6;
  --color-primary-300: #84aad9;
  --color-primary-400: #5b8dcd;
  --color-primary-500: #346cb0;
  --color-primary-600: #2a5790;
  --color-primary-700: #1f4170;
  --color-primary-800: #152c50;
  --color-primary-900: #0b1630;

  /* Success scale (base = #00A28A) */
  --color-success-50:  #e0f5f1;
  --color-success-100: #b3e6dc;
  --color-success-200: #80d5c2;
  --color-success-300: #4dc4a9;
  --color-success-400: #26b698;
  --color-success-500: #00a28a;
  --color-success-600: #008572;
  --color-success-700: #006859;
  --color-success-800: #004b40;
  --color-success-900: #002e27;

  /* Warning scale (base = #F7C46C, sits at 400 — amber is naturally light) */
  --color-warning-50:  #fef7e8;
  --color-warning-100: #fceac0;
  --color-warning-200: #fadc98;
  --color-warning-300: #f9d070;
  --color-warning-400: #f7c46c;
  --color-warning-500: #e6a838;
  --color-warning-600: #c98c1f;
  --color-warning-700: #9a6a14;
  --color-warning-800: #6c4909;
  --color-warning-900: #3e2900;

  /* Danger scale (base = #DC2626 — standard red for medical "critical"
   * semantics. Replaces the original pink-purple palette which conflicted
   * with user expectations of red for errors/destructive actions.) */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #dc2626;
  --color-danger-600: #b91c1c;
  --color-danger-700: #991b1b;
  --color-danger-800: #7f1d1d;
  --color-danger-900: #450a0a;

  /* Info scale (base = #0179A8) */
  --color-info-50:  #e5f1f6;
  --color-info-100: #b8d9e5;
  --color-info-200: #8ac1d3;
  --color-info-300: #5da9c2;
  --color-info-400: #2f91b1;
  --color-info-500: #0179a8;
  --color-info-600: #016388;
  --color-info-700: #014c68;
  --color-info-800: #003648;
  --color-info-900: #001f28;

  /* Neutral scale (existing: #f6f7f9 body, #888c9b muted, #363642 text, #222230 dark) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f6f7f9;
  --color-neutral-100: #ebedf0;
  --color-neutral-200: #d5d9de;
  --color-neutral-300: #abb2bc;
  --color-neutral-400: #888c9b;
  --color-neutral-500: #6b6f7c;
  --color-neutral-600: #4f525e;
  --color-neutral-700: #363642;
  --color-neutral-800: #222230;
  --color-neutral-900: #14141f;

  /* -----------------------------------------------------------
   * Semantic text colors
   * --------------------------------------------------------- */
  --text-primary:   var(--color-neutral-700);
  /* neutral-500 (~5:1 on white) clears WCAG AA; neutral-400 (#888c9b) was ~3.4:1. */
  --text-secondary: var(--color-neutral-500);
  --text-disabled:  var(--color-neutral-300);
  --text-inverse:   var(--color-neutral-0);
  --text-link:      var(--color-primary-600);
  --text-link-hover: var(--color-primary-700);

  /* Semantic surfaces */
  --surface-bg:      var(--color-neutral-50);
  --surface-card:    var(--color-neutral-0);
  --surface-hover:   var(--color-neutral-100);
  --surface-sunken:  var(--color-neutral-100);
  --surface-overlay: rgba(20, 20, 31, 0.55);

  /* Borders */
  --border-subtle:  var(--color-neutral-100);
  --border-default: var(--color-neutral-200);
  --border-strong:  var(--color-neutral-300);
  --border-focus:   var(--color-primary-500);

  /* -----------------------------------------------------------
   * Spacing — 4pt rhythm
   * --------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* -----------------------------------------------------------
   * Typography
   * --------------------------------------------------------- */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Fira Sans",
                      "Helvetica Neue", "Apple Color Emoji", sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
                      "Liberation Mono", "Courier New", monospace;

  --font-xs:   12px;
  --font-sm:   14px;
  --font-base: 16px;
  --font-lg:   18px;
  --font-xl:   24px;
  --font-2xl:  32px;
  --font-3xl:  40px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* -----------------------------------------------------------
   * Radii
   * --------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------
   * Elevation
   * --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(20, 20, 31, 0.06),
              0 0 0 1px rgba(20, 20, 31, 0.04);
  --shadow-2: 0 2px 4px rgba(20, 20, 31, 0.08),
              0 1px 2px rgba(20, 20, 31, 0.04);
  --shadow-3: 0 8px 16px rgba(20, 20, 31, 0.10),
              0 2px 4px rgba(20, 20, 31, 0.06);
  --shadow-4: 0 16px 32px rgba(20, 20, 31, 0.12),
              0 4px 8px rgba(20, 20, 31, 0.06);
  --shadow-focus-ring: 0 0 0 3px rgba(52, 108, 176, 0.30);

  /* -----------------------------------------------------------
   * Motion
   * --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:     cubic-bezier(0.70, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* -----------------------------------------------------------
   * Z-index scale
   * --------------------------------------------------------- */
  --z-dropdown:       1000;
  --z-sticky:         1020;
  --z-fixed:          1030;
  --z-modal-backdrop: 1040;
  --z-modal:          1050;
  --z-popover:        1060;
  --z-tooltip:        1070;
  --z-toast:          1080;

  /* -----------------------------------------------------------
   * Component metrics
   * --------------------------------------------------------- */
  --control-height-sm: 32px;
  --control-height-md: 40px;
  --control-height-lg: 48px;
  --touch-target-min:  44px;

  /* -----------------------------------------------------------
   * Bootstrap 5 variable bridge — let BS5 utilities adopt brand
   * --------------------------------------------------------- */
  --bs-primary:        var(--color-primary-500);
  --bs-primary-rgb:    52, 108, 176;
  --bs-success:        var(--color-success-500);
  --bs-success-rgb:    0, 162, 138;
  --bs-warning:        var(--color-warning-400);
  --bs-warning-rgb:    247, 196, 108;
  --bs-danger:         var(--color-danger-500);
  --bs-danger-rgb:     220, 38, 38;
  --bs-info:           var(--color-info-500);
  --bs-info-rgb:       1, 121, 168;
  --bs-body-color:     var(--text-primary);
  --bs-body-bg:        var(--surface-bg);
  --bs-body-font-family: var(--font-family-sans);
  --bs-border-color:   var(--border-default);
  --bs-border-radius:  var(--radius-md);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);
}

/* -----------------------------------------------------------
 * Dark color mode — charcoal surfaces with Knowyn brand accents.
 * The theme bootstrap script sets data-theme/data-bs-theme before
 * CSS loads, so these variables apply on first paint.
 * --------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-primary-50:  #0c1828;
  --color-primary-100: #12263f;
  --color-primary-200: #1b3f68;
  --color-primary-300: #285489;
  --color-primary-400: #5b8dcd;
  --color-primary-500: #346cb0;
  --color-primary-600: #2a5790;
  --color-primary-700: #adc6e6;
  --color-primary-800: #d6e3f2;
  --color-primary-900: #eef3fa;

  --color-success-50:  #06231f;
  --color-success-100: #0b352f;
  --color-success-200: #105247;
  --color-success-300: #147462;
  --color-success-400: #26b698;
  --color-success-500: #00a28a;
  --color-success-600: #008572;
  --color-success-700: #80d5c2;
  --color-success-800: #b3e6dc;
  --color-success-900: #e0f5f1;

  --color-warning-50:  #2c2108;
  --color-warning-100: #49360d;
  --color-warning-200: #765816;
  --color-warning-300: #a97a20;
  --color-warning-400: #f7c46c;
  --color-warning-500: #e6a838;
  --color-warning-600: #c98c1f;
  --color-warning-700: #fadc98;
  --color-warning-800: #fceac0;
  --color-warning-900: #fef7e8;

  --color-danger-50:  #2a0c0c;
  --color-danger-100: #441313;
  --color-danger-200: #691b1b;
  --color-danger-300: #8f2424;
  --color-danger-400: #f87171;
  --color-danger-500: #dc2626;
  --color-danger-600: #b91c1c;
  --color-danger-700: #fca5a5;
  --color-danger-800: #fecaca;
  --color-danger-900: #fef2f2;

  --color-info-50:  #061b24;
  --color-info-100: #092d3c;
  --color-info-200: #0d4962;
  --color-info-300: #116b8f;
  --color-info-400: #2f91b1;
  --color-info-500: #0179a8;
  --color-info-600: #016388;
  --color-info-700: #8ac1d3;
  --color-info-800: #b8d9e5;
  --color-info-900: #e5f1f6;

  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #0f1520;
  --color-neutral-100: #151d2a;
  --color-neutral-200: #202b3b;
  --color-neutral-300: #334155;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #cbd5e1;
  --color-neutral-600: #d8e0eb;
  --color-neutral-700: #e5edf7;
  --color-neutral-800: #f1f5f9;
  --color-neutral-900: #f8fafc;

  --text-primary:   #e5edf7;
  --text-secondary: #a7b4c7;
  --text-disabled:  #687789;
  --text-inverse:   #ffffff;
  --text-link:      var(--color-primary-700);
  --text-link-hover: var(--color-primary-800);

  --surface-bg:      #0b111a;
  --surface-card:    #121a26;
  --surface-hover:   #1a2635;
  --surface-sunken:  #0f1621;
  --surface-overlay: rgba(0, 0, 0, 0.72);

  --border-subtle:  #1f2a38;
  --border-default: #2c3a4c;
  --border-strong:  #44566d;
  --border-focus:   var(--color-primary-400);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.32),
              0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.36),
              0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 12px 24px rgba(0, 0, 0, 0.42),
              0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-4: 0 18px 42px rgba(0, 0, 0, 0.52),
              0 5px 14px rgba(0, 0, 0, 0.36);
  --shadow-focus-ring: 0 0 0 3px rgba(91, 141, 205, 0.42);

  --bs-primary:        var(--color-primary-500);
  --bs-primary-rgb:    52, 108, 176;
  --bs-success:        var(--color-success-500);
  --bs-success-rgb:    0, 162, 138;
  --bs-warning:        var(--color-warning-400);
  --bs-warning-rgb:    247, 196, 108;
  --bs-danger:         var(--color-danger-500);
  --bs-danger-rgb:     220, 38, 38;
  --bs-info:           var(--color-info-500);
  --bs-info-rgb:       1, 121, 168;
  --bs-body-color:     var(--text-primary);
  --bs-body-bg:        var(--surface-bg);
  --bs-secondary-color: var(--text-secondary);
  --bs-secondary-bg:   var(--surface-hover);
  --bs-tertiary-bg:    var(--surface-sunken);
  --bs-border-color:   var(--border-default);
  --bs-emphasis-color: var(--text-primary);
  --bs-heading-color:  var(--text-primary);
  --bs-link-color:     var(--text-link);
  --bs-link-hover-color: var(--text-link-hover);

  /* Bootstrap's own dark subtle/emphasis defaults sit so close to the charcoal surfaces that
   * subtle badges (admin, active) read as nearly invisible. Lift them onto our tonal scale:
   * a clearly visible tint with light text. Admin (primary) gets the bigger lift. */
  --bs-primary-bg-subtle:      var(--color-primary-200);
  --bs-primary-text-emphasis:  var(--color-primary-800);
  --bs-success-bg-subtle:      var(--color-success-200);
  --bs-success-text-emphasis:  var(--color-success-700);
}

/* Dark-mode contrast fix. Bootstrap's secondary theme colour (#6c757d) drives both
 * .text-secondary (via --bs-secondary-rgb) and .btn-outline-secondary (hard-coded
 * --bs-btn-color); on the charcoal card/body surfaces that is ~3.7:1 and fails WCAG AA.
 * Lift only those two to the dark secondary token (#a7b4c7, ~8:1) — scoped, so the
 * secondary theme colour itself (.bg-secondary avatar tiles, badges) is untouched. */
:root[data-theme="dark"] .text-secondary {
  color: var(--text-secondary) !important;
}
:root[data-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--surface-card);
  --bs-btn-hover-bg: var(--text-secondary);
  --bs-btn-hover-border-color: var(--text-secondary);
  --bs-btn-active-color: var(--surface-card);
  --bs-btn-active-bg: var(--text-secondary);
  --bs-btn-active-border-color: var(--text-secondary);
}

/* =============================================================
 * Utility classes built on tokens
 * ============================================================= */

/* Status dot — used in pills, headers, and quick-action cards */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-300);
  flex-shrink: 0;
}
.status-dot--primary { background-color: var(--color-primary-500); }
.status-dot--success { background-color: var(--color-success-500); }
.status-dot--warning { background-color: var(--color-warning-500); }
.status-dot--danger  { background-color: var(--color-danger-500); }
.status-dot--info    { background-color: var(--color-info-500); }
.status-dot--neutral { background-color: var(--color-neutral-400); }

/* Status label, the app's one status language: a small coloured dot + quiet ink text. Replaces
   filled badges for states (order status, coupling status, user status) so colour marks meaning
   without shouting; the label text carries the state for non-colour readers. */
.status-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  color: var(--text-primary);
  white-space: nowrap;
}
.status-label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background-color: var(--color-neutral-400);
  flex-shrink: 0;
}
.status-label--primary::before { background-color: var(--color-primary-500); }
.status-label--success::before { background-color: var(--color-success-500); }
.status-label--warning::before { background-color: var(--color-warning-500); }
.status-label--danger::before  { background-color: var(--color-danger-500); }
.status-label--info::before    { background-color: var(--color-info-500); }
.status-label--neutral::before { background-color: var(--color-neutral-400); }

/* Tinted icon pill — circular icon background used in stat/quick-action cards */
.icon-tint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.icon-tint--primary { background: var(--color-primary-50);  color: var(--color-primary-600); }
.icon-tint--success { background: var(--color-success-50);  color: var(--color-success-600); }
.icon-tint--warning { background: var(--color-warning-50);  color: var(--color-warning-600); }
.icon-tint--danger  { background: var(--color-danger-50);   color: var(--color-danger-600); }
.icon-tint--info    { background: var(--color-info-50);     color: var(--color-info-600); }
.icon-tint--neutral { background: var(--color-neutral-100); color: var(--color-neutral-600); }
.icon-tint > [class*="icon-"] { font-size: 18px; line-height: 1; }
.icon-tint > .app-icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Trend arrow + value pair — color-not-only safe */
.trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-xs);
  font-weight: var(--weight-semibold);
  line-height: 1;
}
.trend--up   { color: var(--color-success-600); }
.trend--down { color: var(--color-danger-600); }
.trend--neutral { color: var(--text-secondary); }
.trend::before {
  font-family: var(--font-family-sans);
  font-weight: var(--weight-bold);
}
.trend--up::before   { content: "↑"; }
.trend--down::before { content: "↓"; }
.trend--neutral::before { content: "→"; }

/* Focus ring — applied to interactive controls via :focus-visible. Custom <button> controls that are not
   .btn/.form-* (theme cycle, import remove, theme-menu choice, dropdown item) are listed explicitly so
   keyboard focus shows a ring rather than reusing their hover styling. */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible,
.auth-theme-cycle:focus-visible,
.import-remove:focus-visible,
.theme-menu__choice:focus-visible,
.dropdown-menu .dropdown-item:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring) !important;
}

/* Touch target — apply to icon-only buttons */
.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =============================================================
 * Reduced motion
 * ============================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}