/* =========================================================
   Library Hearth Theme (cozy & bookish)
   Warm parchment · espresso ink · brass accents
   Works with Tabler + your HTML pages (PCA, t-SNE, Blog, Post, Book Detail)
   ========================================================= */

/* ---------- Shared tokens ---------- */
:root {
  /* Custom tokens for convenience */
  --hearth-parchment: #FAF7F2;
  --hearth-surface:   #F7F2E9;
  --hearth-ink:       #2F2A26; /* espresso */
  --hearth-brass:     #B08968; /* accent */
  --hearth-sage:      #6B705C;
  --hearth-muted:     #6B5E53;
  --hearth-border:    #D9D3C7;

  --hearth-success:   #4F6D56;
  --hearth-warning:   #B7791F;
  --hearth-danger:    #A33E3E;

  /* Series palette for charts (color-blind friendly spread) */
  --hearth-series-1: #6B705C;  /* sage */
  --hearth-series-2: #B08968;  /* brass */
  --hearth-series-3: #3F4E4F;  /* deep teal-gray */
  --hearth-series-4: #8C5E58;  /* warm clove */
  --hearth-series-5: #A9876F;  /* tan */
  --hearth-series-6: #2F2A26;  /* ink */
}

/* ---------- Light mode ---------- */
:root[data-bs-theme="light"] {
  /* Tabler / Bootstrap-compatible variables */
  --tblr-bg-body:           var(--hearth-parchment);
  --tblr-bg-surface:        var(--hearth-surface);
  --tblr-body-color:        #2B2B2B;              /* readable body text */
  --tblr-primary:           var(--hearth-ink);    /* controls buttons/links */
  --tblr-secondary:         var(--hearth-sage);
  --tblr-border-color:      var(--hearth-border);

  --tblr-success:           var(--hearth-success);
  --tblr-warning:           var(--hearth-warning);
  --tblr-danger:            var(--hearth-danger);
  --logo-color:             var(--hearth-ink);

  /* Component backgrounds (Tabler uses these internally) */
  --tblr-card-bg:           var(--hearth-surface);
  --tblr-navbar-bg:         var(--hearth-surface);
  --tblr-input-bg:          #FFFFFF;
  --tblr-dropdown-bg:       #FFFFFF;

  /* Links */
  --tblr-link-color:        var(--hearth-ink);
  --tblr-link-hover-color:  var(--hearth-brass);
}

/* ---------- Dark mode ---------- */
:root[data-bs-theme="dark"] {
  /* Re-toned for good contrast */
  --tblr-bg-body:           #1E1A16;
  --tblr-bg-surface:        #26211C;
  --tblr-body-color:        #EAE6DE;             /* parchment text */
  --tblr-primary:           #EAE6DE;             /* “ink” becomes light */
  --tblr-secondary:         #8B917D;             /* sage light */
  --tblr-border-color:      #3A342D;

  --tblr-success:           #6FA287;
  --tblr-warning:           #CA9A45;
  --tblr-danger:            #C35A5A;
  --logo-color:             var(--tblr-body-color);

  --tblr-card-bg:           #26211C;
  --tblr-navbar-bg:         #26211C;
  --tblr-input-bg:          #1E1A16;
  --tblr-dropdown-bg:       #1E1A16;

  --tblr-link-color:        #EAE6DE;
  --tblr-link-hover-color:  #C59C7A;
}

/* ---------- Global surfaces ---------- */
body {
  background: var(--tblr-bg-body);
  color: var(--tblr-body-color);
}

/* Navbar, Cards, Inputs take our surface */
.navbar,
.card {
  background: var(--tblr-card-bg);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background-color: var(--tblr-secondary);
  border-color: var(--tblr-secondary);
}
.btn-primary:hover {
  filter: brightness(1.05);
}
.btn-outline {
  border-color: var(--tblr-border-color);
  color: var(--tblr-primary);
}
.btn-outline:hover {
  border-color: var(--hearth-brass);
  color: var(--hearth-ink);
}

/* ---------- Links ---------- */
a {
  color: var(--tblr-link-color);
}
a:hover {
  color: var(--tblr-link-hover-color);
  text-decoration-color: var(--tblr-link-hover-color);
}

/* ---------- Form controls ---------- */
.form-control, .form-select {
  background-color: var(--tblr-input-bg);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hearth-brass);
  box-shadow: 0 0 0 .2rem color-mix(in hsl, var(--hearth-brass) 24%, transparent);
}

/* ---------- Tables ---------- */
.table thead th {
  color: var(--tblr-primary);
  border-bottom-color: var(--tblr-border-color);
}
.table tbody td {
  border-top-color: var(--tblr-border-color);
}

/* ---------- Badges ---------- */
.badge-soft {
  background: color-mix(in hsl, var(--hearth-brass) 16%, var(--tblr-bg-surface));
  color: var(--hearth-ink);
  border: 1px solid color-mix(in hsl, var(--hearth-brass) 36%, var(--tblr-border-color));
}

/* ---------- Utility: graph placeholders from your mockups ---------- */
.graph-placeholder {
  border: 1px solid var(--tblr-border-color);
  background: repeating-linear-gradient(
    45deg,
    color-mix(in hsl, var(--tblr-bg-surface) 82%, var(--tblr-border-color)),
    color-mix(in hsl, var(--tblr-bg-surface) 82%, var(--tblr-border-color)) 8px,
    color-mix(in hsl, var(--tblr-bg-surface) 76%, var(--tblr-border-color)) 8px,
    color-mix(in hsl, var(--tblr-bg-surface) 76%, var(--tblr-border-color)) 16px
  );
  border-radius: .5rem;
  color: var(--hearth-muted);
}

/* ---------- Small polish ---------- */
.card-header .card-title { color: var(--tblr-primary); }
.input-icon-addon { color: var(--tblr-secondary); }
.navbar .navbar-brand .avatar { box-shadow: 0 0 0 2px var(--tblr-bg-body); }


/* Theme-scoped logo color */

/* Mask the SVG and tint with background-color */
.brand-logo {
  width: 28px;              /* size in navbar */
  height: 28px;
  display: inline-block;
  background-color: var(--logo-color); /* color follows theme vars */

  /* Use the external SVG as a mask (works best for single-color logos) */
  -webkit-mask: url("../img/logo-black-96.svg") no-repeat center / contain;
  mask: url("../img/logo-black-96.svg") no-repeat center / contain;
}

/* Optional: high-DPI tweak – increase size if you prefer a bigger mark */
@media (min-resolution: 2dppx) {
  .brand-logo { width: 28px; height: 28px; } /* keep same size; SVG stays crisp */
}