/* ==========================================================================
   Kişi Başı design tokens
   Brand gradient #667eea → #764ba2, semantic colours, spacing/radius/shadow scales,
   Bootstrap 5.3 variable overrides and the dark theme ([data-bs-theme="dark"]).
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Brand */
  --kb-brand-1: #667eea;
  --kb-brand-2: #764ba2;
  --kb-brand-1-rgb: 102, 126, 234;
  --kb-brand-2-rgb: 118, 75, 162;
  --kb-brand-hover: #5a6fd8;
  --kb-brand-active: #4f63cc;
  --kb-brand-soft: rgba(102, 126, 234, 0.12);
  --kb-brand-soft-2: rgba(118, 75, 162, 0.12);
  --kb-gradient: linear-gradient(135deg, var(--kb-brand-1) 0%, var(--kb-brand-2) 100%);
  --kb-on-brand: #ffffff;

  /* Semantic */
  --kb-positive: #15803d;
  --kb-positive-soft: rgba(21, 128, 61, 0.12);
  --kb-negative: #b91c1c;
  --kb-negative-soft: rgba(185, 28, 28, 0.12);
  --kb-warning: #b45309;
  --kb-warning-soft: rgba(180, 83, 9, 0.14);
  --kb-info: #1d4ed8;
  --kb-info-soft: rgba(29, 78, 216, 0.12);

  /* Surfaces & text */
  --kb-bg: #f4f5fa;
  --kb-surface: #ffffff;
  --kb-surface-2: #f1f2f8;
  --kb-surface-3: #e7e9f3;
  --kb-border: #e2e5ef;
  --kb-border-strong: #cdd2e2;
  --kb-text: #1c2033;
  --kb-text-muted: #626a82;
  --kb-text-faint: #9098b0;
  --kb-sidebar-bg: #ffffff;
  --kb-topbar-bg: rgba(244, 245, 250, 0.85);

  /* Spacing */
  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 24px;
  --kb-space-6: 32px;
  --kb-space-7: 48px;

  /* Radius */
  --kb-radius-sm: 8px;
  --kb-radius: 12px;
  --kb-radius-lg: 20px;
  --kb-radius-pill: 999px;

  /* Shadows */
  --kb-shadow-sm: 0 1px 2px rgba(20, 24, 48, 0.06), 0 1px 3px rgba(20, 24, 48, 0.04);
  --kb-shadow: 0 4px 12px rgba(20, 24, 48, 0.08), 0 1px 3px rgba(20, 24, 48, 0.05);
  --kb-shadow-lg: 0 16px 40px rgba(20, 24, 48, 0.14);
  --kb-focus-ring: 0 0 0 3px rgba(var(--kb-brand-1-rgb), 0.45);

  /* Typography */
  --kb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Layout */
  --kb-sidebar-w: 264px;
  --kb-topbar-h: 60px;

  /* Bootstrap bridge */
  --bs-primary: var(--kb-brand-1);
  --bs-primary-rgb: var(--kb-brand-1-rgb);
  --bs-body-font-family: var(--kb-font);
  --bs-body-bg: var(--kb-bg);
  --bs-body-color: var(--kb-text);
  --bs-secondary-color: var(--kb-text-muted);
  --bs-tertiary-color: var(--kb-text-faint);
  --bs-border-color: var(--kb-border);
  --bs-border-radius: var(--kb-radius-sm);
  --bs-border-radius-lg: var(--kb-radius);
  --bs-border-radius-xl: var(--kb-radius-lg);
  --bs-link-color: var(--kb-brand-1);
  --bs-link-color-rgb: var(--kb-brand-1-rgb);
  --bs-link-hover-color: var(--kb-brand-hover);
  --bs-link-hover-color-rgb: 90, 111, 216;
  --bs-success: var(--kb-positive);
  --bs-danger: var(--kb-negative);
  --bs-warning: var(--kb-warning);
  --bs-info: var(--kb-info);
  --bs-focus-ring-color: rgba(var(--kb-brand-1-rgb), 0.35);
  --bs-form-valid-color: var(--kb-positive);
  --bs-form-invalid-color: var(--kb-negative);
  color-scheme: light;
}

[data-bs-theme="dark"] {
  --kb-brand-hover: #7c90f0;
  --kb-brand-active: #8fa0f3;
  --kb-brand-soft: rgba(102, 126, 234, 0.22);
  --kb-brand-soft-2: rgba(118, 75, 162, 0.26);

  --kb-positive: #4ade80;
  --kb-positive-soft: rgba(74, 222, 128, 0.16);
  --kb-negative: #f87171;
  --kb-negative-soft: rgba(248, 113, 113, 0.16);
  --kb-warning: #fbbf24;
  --kb-warning-soft: rgba(251, 191, 36, 0.16);
  --kb-info: #60a5fa;
  --kb-info-soft: rgba(96, 165, 250, 0.16);

  --kb-bg: #0f1118;
  --kb-surface: #171a24;
  --kb-surface-2: #1f2331;
  --kb-surface-3: #282d3d;
  --kb-border: #2a2f40;
  --kb-border-strong: #3a4056;
  --kb-text: #e8eaf3;
  --kb-text-muted: #a3aac0;
  --kb-text-faint: #6f778f;
  --kb-sidebar-bg: #13161f;
  --kb-topbar-bg: rgba(15, 17, 24, 0.82);

  --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --kb-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  --kb-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);

  --bs-body-bg: var(--kb-bg);
  --bs-body-color: var(--kb-text);
  --bs-secondary-color: var(--kb-text-muted);
  --bs-tertiary-color: var(--kb-text-faint);
  --bs-border-color: var(--kb-border);
  --bs-link-color: #8fa0f3;
  --bs-link-color-rgb: 143, 160, 243;
  --bs-link-hover-color: #a9b6f6;
  --bs-link-hover-color-rgb: 169, 182, 246;
  --bs-success: var(--kb-positive);
  --bs-danger: var(--kb-negative);
  --bs-warning: var(--kb-warning);
  --bs-info: var(--kb-info);
  color-scheme: dark;
}

/* Bootstrap component re-skin (buttons/forms/nav use their own CSS vars, not --bs-primary) */
.btn-primary {
  --bs-btn-bg: var(--kb-brand-1);
  --bs-btn-border-color: var(--kb-brand-1);
  --bs-btn-hover-bg: var(--kb-brand-hover);
  --bs-btn-hover-border-color: var(--kb-brand-hover);
  --bs-btn-active-bg: var(--kb-brand-active);
  --bs-btn-active-border-color: var(--kb-brand-active);
  --bs-btn-disabled-bg: var(--kb-brand-1);
  --bs-btn-disabled-border-color: var(--kb-brand-1);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--kb-brand-1-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--kb-brand-1);
  --bs-btn-border-color: var(--kb-brand-1);
  --bs-btn-hover-bg: var(--kb-brand-1);
  --bs-btn-hover-border-color: var(--kb-brand-1);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--kb-brand-active);
  --bs-btn-active-border-color: var(--kb-brand-active);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: var(--kb-brand-1-rgb);
}
.btn-danger { --bs-btn-bg: var(--kb-negative); --bs-btn-border-color: var(--kb-negative); --bs-btn-hover-bg: #991b1b; --bs-btn-hover-border-color: #991b1b; --bs-btn-active-bg: #7f1d1d; --bs-btn-active-border-color: #7f1d1d; }
.btn-outline-danger { --bs-btn-color: var(--kb-negative); --bs-btn-border-color: var(--kb-negative); --bs-btn-hover-bg: var(--kb-negative); --bs-btn-hover-border-color: var(--kb-negative); }
.btn-success { --bs-btn-bg: var(--kb-positive); --bs-btn-border-color: var(--kb-positive); --bs-btn-hover-bg: #166534; --bs-btn-hover-border-color: #166534; --bs-btn-active-bg: #14532d; --bs-btn-active-border-color: #14532d; }
.form-control:focus, .form-select:focus { border-color: var(--kb-brand-1); box-shadow: var(--kb-focus-ring); }
.form-check-input:checked { background-color: var(--kb-brand-1); border-color: var(--kb-brand-1); }
.form-check-input:focus { border-color: var(--kb-brand-1); box-shadow: var(--kb-focus-ring); }
.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary { background-color: var(--kb-brand-1); border-color: var(--kb-brand-1); color: #fff; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--kb-brand-1); --bs-nav-pills-link-active-color: #fff; --bs-nav-link-color: var(--kb-text-muted); --bs-nav-link-hover-color: var(--kb-text); }
.text-bg-primary { background-color: var(--kb-brand-1) !important; }
.badge.text-bg-success { background-color: var(--kb-positive) !important; }
.badge.text-bg-danger { background-color: var(--kb-negative) !important; }
.badge.text-bg-warning { background-color: var(--kb-warning) !important; color: #fff !important; }
.text-success { color: var(--kb-positive) !important; }
.text-danger { color: var(--kb-negative) !important; }
.dropdown-menu { --bs-dropdown-bg: var(--kb-surface); --bs-dropdown-border-color: var(--kb-border); --bs-dropdown-link-hover-bg: var(--kb-surface-2); --bs-dropdown-link-active-bg: var(--kb-brand-1); --bs-dropdown-border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
.modal-content { --bs-modal-bg: var(--kb-surface); --bs-modal-border-color: var(--kb-border); --bs-modal-border-radius: var(--kb-radius-lg); box-shadow: var(--kb-shadow-lg); }
.toast { --bs-toast-bg: var(--kb-surface); --bs-toast-border-color: var(--kb-border); --bs-toast-border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); }
.card { --bs-card-bg: var(--kb-surface); --bs-card-border-color: var(--kb-border); --bs-card-border-radius: var(--kb-radius); }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--kb-border); --bs-table-hover-bg: var(--kb-surface-2); --bs-table-striped-bg: var(--kb-surface-2); }
.list-group { --bs-list-group-bg: var(--kb-surface); --bs-list-group-border-color: var(--kb-border); --bs-list-group-border-radius: var(--kb-radius); }
.offcanvas { --bs-offcanvas-bg: var(--kb-sidebar-bg); --bs-offcanvas-color: var(--kb-text); }
.alert-success { --bs-alert-color: var(--kb-positive); --bs-alert-bg: var(--kb-positive-soft); --bs-alert-border-color: transparent; }
.alert-danger { --bs-alert-color: var(--kb-negative); --bs-alert-bg: var(--kb-negative-soft); --bs-alert-border-color: transparent; }
.alert-warning { --bs-alert-color: var(--kb-warning); --bs-alert-bg: var(--kb-warning-soft); --bs-alert-border-color: transparent; }
.alert-info { --bs-alert-color: var(--kb-info); --bs-alert-bg: var(--kb-info-soft); --bs-alert-border-color: transparent; }