/* Linkjes theme (site-wide)
   Palette: #FAF3DD #C8D5B9 #8FC0A9 #68B0AB #696D7D
   Dark mode: strict black/white focus
*/

:root{
  --lj-eggshell:#FAF3DD;
  --lj-tea:#C8D5B9;
  --lj-mutedteal:#8FC0A9;
  --lj-tropical:#68B0AB;
  --lj-slate:#696D7D;

  /* Light defaults */
  --lj-bg: #ffffff;
  --lj-surface: color-mix(in oklab, #ffffff, var(--lj-eggshell) 35%);
  --lj-surface-2: color-mix(in oklab, #ffffff, var(--lj-eggshell) 22%);
  --lj-text: #111111;
  --lj-muted: rgba(17,17,17,.65);
  --lj-border: rgba(17,17,17,.12);

  --lj-primary: var(--lj-tropical);
  --lj-primary-text: #0a0a0a;
  --lj-link: #0b5560;
}

/* Bootstrap tokens */
:root{
  --bs-body-bg: var(--lj-bg);
  --bs-body-color: var(--lj-text);
  --bs-border-color: var(--lj-border);
  --bs-link-color: var(--lj-link);
  --bs-link-hover-color: color-mix(in oklab, var(--lj-link), #000 20%);
  --bs-primary: var(--lj-primary);
}

html, body{
  background: var(--lj-bg) !important;
  color: var(--lj-text) !important;
}

/* Cards / surfaces */
.card,
.dropdown-menu,
.offcanvas,
.modal-content{
  background: var(--lj-surface) !important;
  border-color: var(--lj-border) !important;
}

.navbar{
  background: var(--lj-surface-2) !important;
  border-color: var(--lj-border) !important;
}

/* Buttons */
.btn-primary{
  background-color: var(--lj-primary) !important;
  border-color: color-mix(in oklab, var(--lj-primary), #000 12%) !important;
  color: var(--lj-primary-text) !important;
}
.btn-primary:hover{
  filter: brightness(.97);
}
.btn-outline-secondary{
  border-color: var(--lj-border) !important;
  color: var(--lj-text) !important;
}
.btn-outline-secondary:hover{
  background: color-mix(in oklab, var(--lj-tea), #fff 70%) !important;
}
.btn-outline-danger{
  border-color: rgba(220,53,69,.55) !important;
}

/* Inputs */
.form-control, .form-select{
  background: rgba(255,255,255,.9) !important;
  color: var(--lj-text) !important;
  border-color: var(--lj-border) !important;
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--lj-primary), #000 10%) !important;
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--lj-primary), transparent 70%) !important;
}

/* Tables */
.table{
  --bs-table-bg: transparent;
  color: var(--lj-text);
}
.table td, .table th{
  border-color: var(--lj-border) !important;
}

/* Alerts */
.alert{
  border-color: var(--lj-border) !important;
}

/* =====================
   TRUE DARK MODE
   ===================== */
html[data-bs-theme="dark"]{
  /* Pure black/white base (your request) */
  --lj-bg: #000000;
  --lj-surface: #0b0b0b;
  --lj-surface-2: #070707;
  --lj-text: #ffffff;
  --lj-muted: rgba(255,255,255,.65);
  --lj-border: rgba(255,255,255,.14);

  /* Keep brand accent subtle */
  --lj-primary: #ffffff;          /* primary becomes white */
  --lj-primary-text: #000000;     /* text becomes black */
  --lj-link: #ffffff;

  --bs-body-bg: var(--lj-bg);
  --bs-body-color: var(--lj-text);
  --bs-border-color: var(--lj-border);
  --bs-primary: var(--lj-primary);
  --bs-link-color: var(--lj-link);
  --bs-link-hover-color: rgba(255,255,255,.9);
}

/* Force background to truly black everywhere */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body{
  background: #000000 !important;
  color: #ffffff !important;
}

/* In dark mode: make cards & navbar close to black */
html[data-bs-theme="dark"] .card,
html[data-bs-theme="dark"] .dropdown-menu,
html[data-bs-theme="dark"] .offcanvas,
html[data-bs-theme="dark"] .modal-content{
  background: #0b0b0b !important;
  border-color: rgba(255,255,255,.14) !important;
}

html[data-bs-theme="dark"] .navbar{
  background: #070707 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* Inputs: black background, white text */
html[data-bs-theme="dark"] .form-control,
html[data-bs-theme="dark"] .form-select{
  background: #000000 !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.18) !important;
}
html[data-bs-theme="dark"] .form-control::placeholder{
  color: rgba(255,255,255,.5) !important;
}
html[data-bs-theme="dark"] .form-control:focus,
html[data-bs-theme="dark"] .form-select:focus{
  border-color: rgba(255,255,255,.35) !important;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12) !important;
}

/* Primary button: white background, black text */
html[data-bs-theme="dark"] .btn-primary{
  background: #ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  color: #000000 !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary{
  border-color: rgba(255,255,255,.22) !important;
  color: #ffffff !important;
}
html[data-bs-theme="dark"] .btn-outline-secondary:hover{
  background: rgba(255,255,255,.08) !important;
}

/* Muted text */
html[data-bs-theme="dark"] .text-secondary,
html[data-bs-theme="dark"] .form-text{
  color: rgba(255,255,255,.65) !important;
}

/* Tables */
html[data-bs-theme="dark"] .table td,
html[data-bs-theme="dark"] .table th{
  border-color: rgba(255,255,255,.12) !important;
}