/* Khaqan Coal theme system — shared chrome and transition rules.
   Load before the selected per-skin sheet and themes-shared.css. */

/* ==================================================================
   KHAQAN COAL COMPANY — Official brand theme system
   ------------------------------------------------------------------
   3 premium skins, each with a full day + night mode:
     · signature — the original forest-coal & gold look (default)
     · marble    — gold on white marble (day) / black marble (night)
     · obsidian  — gold on metallic black (night) / platinum (day)
   Plus: official logo lockup, theme switcher, responsive hardening,
   day-mode contrast upgrades and premium motion.
   Loaded AFTER styles.css / crm.css so skin rules win.
   ================================================================== */

/* ------------------------------------------------------------------
   0. Official logo lockup
   ------------------------------------------------------------------ */
.brand-logo {
  display: block;
  width: auto;
  height: 44px;
  flex: 0 0 auto;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .18));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease;
}
.brand-logo img { display: block; width: auto; height: 100%; }
.site-header .brand-logo { height: 46px; }
.footer .brand-logo { height: 58px; }
.crm-header .brand-logo { height: 42px; }
.brand:hover .brand-logo { transform: translateY(-2px) scale(1.04); filter: drop-shadow(0 8px 22px rgba(212, 160, 52, .3)); }
html[data-theme="day"] .footer .brand-logo { filter: drop-shadow(0 6px 16px rgba(90, 74, 35, .14)); }
@media (max-width: 920px) { .site-header .brand-logo { height: 40px; } }
@media (max-width: 680px) {
  .site-header .brand-logo { height: 34px; }
  .footer .brand-logo { height: 48px; }
  .crm-header .brand-logo { height: 34px; }
}

/* ------------------------------------------------------------------
   1. Theme switcher (skin picker) — shared chrome for every skin
   ------------------------------------------------------------------ */
.skin-switch { position: relative; display: inline-flex; }
.skin-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, .03);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.skin-toggle:hover { color: var(--yellow); border-color: rgba(212, 160, 52, .5); background: rgba(212, 160, 52, .07); transform: translateY(-2px); }
.skin-toggle-icon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--yellow);
  background: radial-gradient(circle at 32% 30%, rgba(255, 232, 158, .9), rgba(212, 160, 52, .28) 58%, transparent 70%);
  font-size: .8rem;
  line-height: 1;
  box-shadow: 0 0 0 3px rgba(212, 160, 52, .12);
}
html[data-theme="day"] .skin-toggle { color: #241f14; background: rgba(255, 255, 255, .5); border-color: rgba(90, 74, 35, .26); }
html[data-theme="day"] .skin-toggle:hover { color: #8a6510; border-color: rgba(160, 116, 22, .5); background: rgba(212, 160, 52, .1); }

.skin-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 80;
  width: min(348px, calc(100vw - 40px));
  padding: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background: rgba(16, 18, 17, .92);
  backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(212, 160, 52, .06) inset;
  transform-origin: top right;
}
html[data-theme="day"] .skin-menu { background: rgba(252, 250, 245, .94); border-color: rgba(60, 50, 30, .2); box-shadow: 0 30px 80px rgba(70, 60, 30, .22); }
.skin-menu[data-open] { animation: skinMenuIn .38s cubic-bezier(.18, 1.2, .3, 1) both; }
@keyframes skinMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(.94); }
  to { opacity: 1; transform: none; }
}
.skin-menu-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 2px 4px 12px;
  color: var(--ink-soft);
  font-size: .62rem;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.skin-menu-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.skin-menu-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 10px rgba(212, 160, 52, .65); animation: skinLive 2.4s ease-in-out infinite; }
@keyframes skinLive { 50% { opacity: .4; transform: scale(.8); } }

.skin-option {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr 18px;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 15px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: skinOptionIn .45s cubic-bezier(.2, .8, .2, 1) forwards;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.skin-option:nth-child(2) { animation-delay: .05s; }
.skin-option:nth-child(3) { animation-delay: .1s; }
.skin-option:nth-child(4) { animation-delay: .15s; }
@keyframes skinOptionIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.skin-option:hover { background: rgba(212, 160, 52, .07); border-color: rgba(212, 160, 52, .22); transform: translateX(2px); }
.skin-option.active { background: rgba(212, 160, 52, .1); border-color: rgba(212, 160, 52, .45); box-shadow: 0 8px 24px rgba(212, 160, 52, .08); }
.skin-swatch {
  position: relative;
  overflow: hidden;
  width: 54px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}
.skin-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 244, 200, .35) 47%, transparent 60%);
  animation: swatchSheen 3.8s ease-in-out infinite;
}
@keyframes swatchSheen { 0%, 100% { transform: translateX(-120%); } 55% { transform: translateX(120%); } }
.skin-swatch-signature { background: linear-gradient(135deg, #0a1f13 0%, #14301f 45%, #efd174 100%); }
.skin-swatch-marble { background: linear-gradient(135deg, #16161c 0%, #16161c 38%, #f6f2e8 52%, #efe8d8 100%); }
.skin-swatch-marble::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 30%, rgba(212, 160, 52, .5), transparent 42%); }
.skin-swatch-obsidian { background: linear-gradient(135deg, #08080b 0%, #23232b 55%, #d4a034 100%); }
.skin-swatch-obsidian::before { content: ""; position: absolute; inset: 0; background: linear-gradient(60deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 58%); }
.skin-option b { display: block; font-size: .82rem; font-weight: 800; letter-spacing: .01em; }
.skin-option small { display: block; margin-top: 2px; color: var(--ink-soft); font-size: .64rem; line-height: 1.4; }
.skin-check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  font-size: .62rem;
  transition: all .3s cubic-bezier(.2, .8, .2, 1);
}
.skin-option.active .skin-check { color: #141005; background: linear-gradient(140deg, #f2c65e, #c08e22); border-color: transparent; box-shadow: 0 4px 14px rgba(212, 160, 52, .4); transform: scale(1.08); }
.skin-menu-note {
  margin: 4px 4px 0;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: .62rem;
  line-height: 1.6;
}
.skin-menu-note b { color: var(--yellow); font-weight: 800; }

@media (max-width: 680px) {
  .skin-menu {
    top: auto;
    right: 16px;
    bottom: 16px;
    left: 16px;
    width: auto;
    transform-origin: bottom center;
  }
  .skin-menu[data-open] { animation: skinSheetIn .42s cubic-bezier(.18, 1.15, .3, 1) both; }
  @keyframes skinSheetIn { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
  .skin-option { grid-template-columns: 50px 1fr 18px; padding: 12px 10px; }
}

/* ------------------------------------------------------------------
   2. Smooth cross-fade when switching skins or day/night
   ------------------------------------------------------------------ */
html.theming, html.theming body, html.theming body::before, html.theming body::after,
html.theming * , html.theming *::before, html.theming *::after {
  transition:
    background-color .55s cubic-bezier(.4, 0, .2, 1),
    background-image .55s cubic-bezier(.4, 0, .2, 1),
    color .55s cubic-bezier(.4, 0, .2, 1),
    border-color .55s cubic-bezier(.4, 0, .2, 1),
    box-shadow .55s cubic-bezier(.4, 0, .2, 1),
    fill .55s ease, stroke .55s ease,
    filter .55s ease, opacity .4s ease !important;
  animation-play-state: running !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theming, html.theming * { transition-duration: .001ms !important; }
}