/*
  Kernlogik Theme Tokens v1
  Source of truth: kernplattform/docs/design/branding/theme-tokens-v1.md
  This file is module-neutral and may be copied into other modules unchanged.
*/

:root {
  --brand-primary: #4c7dff;
  --brand-primary-hover: color-mix(in srgb, var(--brand-primary) 84%, white);
  --brand-accent: #5ac97a;
  --theme-color: #0f1115;
  --app-success: #198754;
  --app-success-hover: #157347;
  --app-success-subtle: #d4f8dd;
  --app-success-subtle-border: #add8b8;
  --app-success-subtle-text: #14251a;
  --app-warning: #ef9f12;
  --app-danger: #dc3545;
  --app-info: #0dcaf0;
}

[data-theme="light"] {
  --app-bg: #f6f8fb;
  --app-surface: #ffffff;
  --app-surface-muted: #eef2f7;
  --app-text: #121722;
  --app-text-muted: #667788;
  --app-border: #d7e0eb;
  --app-close-filter: none;
  color-scheme: light;
}

[data-theme="dark"] {
  --app-bg: #0f1115;
  --app-surface: #151922;
  --app-surface-muted: #1d2430;
  --app-text: #f4f7fb;
  --app-text-muted: #a9b6c7;
  --app-border: rgba(255,255,255,0.10);
  --app-close-filter: invert(1) grayscale(100%);
  color-scheme: dark;
}

[data-theme] {
  --bs-primary: var(--brand-primary);
  --bs-success: var(--app-success);
  --bs-success-rgb: 25, 135, 84;
  --bs-warning: var(--app-warning);
  --bs-warning-rgb: 239, 159, 18;
  --bs-danger: var(--app-danger);
  --bs-danger-rgb: 220, 53, 69;
  --bs-info: var(--app-info);
  --bs-info-rgb: 13, 202, 240;
  --bs-body-bg: var(--app-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-secondary-color: var(--app-text-muted);
  --bs-secondary-bg: var(--app-surface-muted);
  --bs-tertiary-bg: color-mix(in srgb, var(--app-surface-muted) 72%, var(--app-surface));
  --bs-emphasis-color: var(--app-text);
}

[data-theme] .btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--brand-primary) 86%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-primary) 86%, black);
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 78%, black);
}

[data-theme] .btn-outline-primary {
  --bs-btn-color: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: color-mix(in srgb, var(--brand-primary) 78%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--brand-primary) 78%, black);
}

[data-theme] .btn-primary:focus-visible,
[data-theme] .btn-outline-primary:focus-visible {
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

[data-theme] .bg-primary,
[data-theme] .text-bg-primary {
  background-color: var(--brand-primary) !important;
}

[data-theme] .text-primary {
  color: var(--brand-primary) !important;
}

[data-theme] .border-primary {
  border-color: var(--brand-primary) !important;
}

[data-theme] .dropdown-menu {
  --bs-dropdown-color: var(--app-text);
  --bs-dropdown-bg: var(--app-surface);
  --bs-dropdown-border-color: var(--app-border);
  --bs-dropdown-link-color: var(--app-text);
  --bs-dropdown-link-hover-color: var(--app-text);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--brand-primary) 12%, var(--app-surface));
  --bs-dropdown-link-active-color: var(--app-text);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--brand-primary) 22%, var(--app-surface));
  box-shadow: 0 .75rem 1.75rem color-mix(in srgb, black 24%, transparent);
}

[data-theme] .dropdown-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

[data-theme] .dropdown-divider {
  border-top-color: var(--app-border);
}

[data-theme] .navbar .nav-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
}

.theme-toggle {
  border: 1px solid var(--app-border);
  background: var(--app-surface-muted);
  color: var(--app-text);
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  padding: .45rem .7rem;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--brand-primary);
  color: var(--app-text);
  outline: none;
}

.theme-toggle-label {
  font-size: .85rem;
}