/* ============================================================
   SLAVIC HOMEMAKING — CENTRAL THEME
   One source of truth for all colours, light + dark mode.
   ------------------------------------------------------------
   STRUCTURE
   1. LIGHT PALETTE — raw colours for light mode, named by what
                      they ARE. Collapsed: no near-duplicates.
   2. DARK PALETTE  — its own raw colours for dark mode, tuned
                      for contrast on a forest background.
   3. SEMANTIC      — roles, named by what they DO. Point at the
                      palette. Pages reference ONLY these.
                      body.dark repoints the SAME roles at the
                      dark palette — clean symmetric switch.
   4. SHARED        — theme-driven component rules (nav, footer,
                      logo swap, toggle).
   ------------------------------------------------------------
   Pages must never hard-code colours. Edit here only.
   ============================================================ */

/* ============================================================
   1. LIGHT PALETTE  (the only place light hexes are defined)
   ============================================================ */
:root {
  /* Neutrals (collapsed: page bg, surface, deep text) */
  --L-bg:        #FDFAF6;   /* page background */
  --L-surface:   #F7F3EE;   /* raised surfaces */
  --L-ink:       #2A2A27;   /* primary text    */

  /* Greens */
  --L-green:        #3D4F3A;   /* primary brand / dark element */
  --L-green-mid:    #546750;
  --L-green-soft:   #7A906B;

  /* Gold */
  --L-gold:       #B8963E;   /* accent         */
  --L-gold-soft:  #D4AF6A;   /* lighter accent */
  --L-gold-pale:  #E8D5A8;   /* subtle tag bg  */

  /* Greys */
  --L-grey:       #8C8580;   /* secondary text   */
  --L-grey-soft:  #C4BEB8;   /* faint text/lines */

  /* RGB triplets (for alpha borders/overlays) */
  --L-green-rgb:  184,150,62;
  --L-ink-rgb:    42,42,39;
  --L-paper-rgb:  247,243,238;
}

/* ============================================================
   2. DARK PALETTE  (its own contrast-tuned set)
   ============================================================ */
:root {
  /* Neutrals — deep forest, inverted roles */
  --D-bg:        #2C3A2B;   /* page background (deep forest)    */
  --D-surface:   #34452F;   /* raised surfaces (lighter forest) */
  --D-ink:       #EFE6CE;   /* primary text (warm oat)          */

  /* Greens — used as light elements on dark */
  --D-green:        #f5e6b8;
  --D-green-mid:    #A8BC99;
  --D-green-soft:   #8BA178;

  /* Gold — brighter for dark backgrounds */
  --D-gold:       #B8963E;
  --D-gold-soft:  #E0C088;
  --D-gold-pale:  #5A4D2E;

  /* Greys — warm, readable on dark */
  --D-grey:       #A8A199;
  --D-grey-soft:  #6B655E;

  /* RGB triplets */
  --D-green-rgb:  212,175,106;
}

/* ============================================================
   SHARED RAW (theme-independent — same in both modes)
   ============================================================ */
:root {
  --c-whatsapp:   #25D366;
  --c-error:      #C0392B;
  --c-black-rgb:  0,0,0;
  --c-white-rgb:  255,255,255;

  /* Footer band is a FIXED dark surface in both themes. */
  --fixed-footer-bg:   #2A2A27;
  --fixed-footer-rgb:  247,243,238;

  /* Photo-placeholder tints — collapsed to ONE neutral pair. */
  --ph-bg: #ECE6DC;
  --ph-fg: #8C8580;
}

/* ============================================================
   3. SEMANTIC ROLES  — pages reference ONLY these
   ============================================================ */
:root {
  /* surfaces & text */
  --warm-white:   var(--L-bg);
  --cream:        var(--L-surface);
  --charcoal:     var(--L-ink);

  /* greens */
  --forest:       var(--L-green);
  --forest-mid:   var(--L-green-mid);
  --forest-light: var(--L-green-soft);

  /* gold */
  --gold:         var(--L-gold);
  --gold-light:   var(--L-gold-soft);
  --gold-pale:    var(--L-gold-pale);

  /* greys */
  --stone:        var(--L-grey);
  --stone-light:  var(--L-grey-soft);

  /* borders */
  --border:       rgba(var(--L-green-rgb), 0.25);
  --border-light: rgba(var(--L-green-rgb), 0.12);

  /* nav */
  --nav-bg:        rgba(var(--L-paper-rgb), 0.98);
  --nav-bg-scroll: rgba(var(--L-paper-rgb), 0.96);
  --nav-shadow:    rgba(var(--c-black-rgb), 0.04);

  /* whatsapp */
  --whatsapp:              var(--c-whatsapp);
  --whatsapp-shadow:       rgba(37,211,102,0.4);
  --whatsapp-shadow-hover: rgba(37,211,102,0.5);

  /* overlays (theme-independent dark scrims) */
  --overlay-dark:        rgba(var(--c-black-rgb),0.35);
  --overlay-dark-strong: rgba(var(--c-black-rgb),0.55);
  --overlay-charcoal:    rgba(var(--L-ink-rgb),0.6);
  --dot-inactive:        rgba(var(--c-white-rgb),0.85);

  /* footer (fixed dark band, identical both themes) */
  --footer-bg:         var(--fixed-footer-bg);
  --footer-heading:    var(--L-surface);
  --footer-text:       rgba(var(--fixed-footer-rgb),0.7);
  --footer-faint:      rgba(var(--fixed-footer-rgb),0.5);
  --footer-muted:      rgba(var(--fixed-footer-rgb),0.4);
  --footer-hairline:   rgba(var(--fixed-footer-rgb),0.08);
  --footer-link-hover: var(--L-gold);

  /* on-dark text tints (over forest panels/scrims) */
  --on-dark-75: rgba(var(--fixed-footer-rgb),0.75);
  --on-dark-65: rgba(var(--fixed-footer-rgb),0.65);
  --on-dark-60: rgba(var(--fixed-footer-rgb),0.6);
  --on-dark-55: rgba(var(--fixed-footer-rgb),0.55);
  --on-dark-35: rgba(var(--fixed-footer-rgb),0.35);
  --on-dark-10: rgba(var(--fixed-footer-rgb),0.1);

  /* placeholders (all point at the single neutral pair) */
  --ph-warm-bg:   var(--ph-bg);
  --ph-sage-bg:   var(--ph-bg);
  --ph-stone-bg:  var(--ph-bg);   --ph-stone-fg: var(--ph-fg);
  --ph-cream-bg:  var(--ph-bg);   --ph-cream-fg: var(--ph-fg);
  --ph-forest-bg: var(--ph-bg);
  --ph-goldp-bg:  var(--ph-bg);   --ph-goldp-fg: var(--ph-fg);

  /* legacy aliases still referenced by pages */
  --white:        rgba(var(--fixed-footer-rgb),0.7);
  --border-white: rgba(var(--fixed-footer-rgb),0.5);
  --error:        var(--c-error);
}

/* ---- DARK: repoint the SAME roles at the dark palette ---- */
body.dark, html.pre-dark body {
  --warm-white:   var(--D-bg);
  --cream:        var(--D-surface);
  --charcoal:     var(--D-ink);

  --forest:       var(--D-green);
  --forest-mid:   var(--D-green-mid);
  --forest-light: var(--D-green-soft);

  --gold:         var(--D-gold);
  --gold-light:   var(--D-gold-soft);
  --gold-pale:    var(--D-gold-pale);

  --stone:        var(--D-grey);
  --stone-light:  var(--D-grey-soft);

  --border:       rgba(var(--D-green-rgb),0.30);
  --border-light: rgba(var(--D-green-rgb),0.16);

  --nav-bg:        rgba(44,58,43,0.97);
  --nav-bg-scroll: rgba(44,58,43,0.97);

  /* footer NOT repointed → stays the fixed dark band */
  --white:        var(--D-gold-pale);
  --border-white: var(--D-surface);
}

body { transition: background-color 0.4s ease, color 0.4s ease; }

/* ============================================================
   4. SHARED THEME-DRIVEN COMPONENTS
   ============================================================ */
nav { background: var(--nav-bg); }
nav.scrolled { background: var(--nav-bg-scroll); }
body.dark nav, html.pre-dark nav { border-bottom-color: var(--border-light); }

body.dark .btn--primary, html.pre-dark .btn--primary { background: var(--gold); color: var(--warm-white); }
body.dark .btn--primary:hover, html.pre-dark .btn--primary:hover { background: var(--gold-light); }

footer { background: var(--footer-bg); color: var(--footer-faint); }
footer .footer-brand h3 { color: var(--footer-heading); }
footer .footer-brand p  { color: var(--footer-text); }
footer .footer-col h4   { color: var(--footer-heading); }
footer .footer-col a    { color: var(--footer-muted); }
footer .footer-col a:hover { color: var(--footer-link-hover); }
footer .footer-social a:hover { color: var(--footer-link-hover); }

.logo-dark { display: none; }
body.dark .logo-light, html.pre-dark .logo-light { display: none; }
body.dark .logo-dark,  html.pre-dark .logo-dark  { display: block; }

.theme-toggle {
  background: transparent; border: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--charcoal); transition: background 0.2s, color 0.2s;
  flex-shrink: 0; padding: 0;
}
.theme-toggle:hover { background: var(--border-light); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: block; }
.theme-toggle .icon-sun  { display: none; }
body.dark .theme-toggle .icon-moon, html.pre-dark .theme-toggle .icon-moon { display: none; }
body.dark .theme-toggle .icon-sun,  html.pre-dark .theme-toggle .icon-sun  { display: block; }

/* ============================================================
   5. FOOTER LOCK — footer is identical in light & dark.
   Unscoped so BOTH modes get the same frozen tokens.
   These beat page-level footer rules on specificity.
   ============================================================ */
footer { background: var(--footer-bg); color: var(--footer-faint); }
footer .footer-brand h3 { color: var(--footer-heading); }
footer .footer-brand p  { color: var(--footer-text); }
footer .footer-lang     { color: var(--footer-muted); }
footer .footer-col h4   { color: var(--footer-heading); }
footer .footer-col ul   { color: var(--footer-muted); }
footer .footer-col a    { color: var(--footer-muted); }
footer .footer-col a:hover { color: var(--footer-link-hover); }
footer .footer-bottom   { color: var(--footer-muted); border-top-color: var(--footer-hairline); }
footer .footer-legal a  { color: var(--footer-muted); }
footer .footer-legal a:hover { color: var(--footer-link-hover); }
/* ============================================================
   6. COOKIE CONSENT BANNER (shared, themed)
   ============================================================ */
#shm-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: none;
  background: var(--footer-bg);
  border-top: 1px solid var(--border-light);
  box-shadow: 0 -6px 24px rgba(var(--c-black-rgb), 0.18);
  transform: translateY(100%); transition: transform 0.35s ease;
}
#shm-cookie-banner.shm-cc-visible { transform: translateY(0); }
.shm-cc-inner {
  max-width: 1100px; margin: 0 auto;
  padding: 1.25rem clamp(1.25rem, 4vw, 2.5rem);
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  justify-content: space-between;
}
.shm-cc-text { flex: 1; min-width: 280px; }
.shm-cc-text strong {
  display: block; font-family: 'Jost', sans-serif; font-size: 0.8rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--footer-heading);
  margin-bottom: 0.4rem; font-weight: 500;
}
.shm-cc-text p { font-size: 0.8rem; line-height: 1.65; color: var(--footer-text); margin: 0; }
.shm-cc-text a { color: var(--footer-link-hover); }
.shm-cc-actions { display: flex; gap: 0.75rem; flex-shrink: 0; flex-wrap: wrap; }
.shm-cc-btn {
  font-family: 'Jost', sans-serif; font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.85rem 1.5rem; cursor: pointer; border: 1.5px solid transparent;
  transition: all 0.2s; white-space: nowrap;
}
.shm-cc-reject {
  background: transparent; color: var(--footer-text);
  border-color: var(--footer-muted);
}
.shm-cc-reject:hover { border-color: var(--footer-heading); color: var(--footer-heading); }
.shm-cc-accept {
  background: var(--footer-link-hover); color: var(--fixed-footer-bg);
  border-color: var(--footer-link-hover);
}
.shm-cc-accept:hover { filter: brightness(1.08); }
@media (max-width: 620px) {
  #shm-cookie-banner {
    max-height: 58dvh;
    overflow-y: auto;
  }
  .shm-cc-inner {
    padding: 1rem 1.15rem;
    gap: 0.9rem;
  }
  .shm-cc-text { min-width: 0; }
  .shm-cc-text strong {
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
  }
  .shm-cc-text p {
    font-size: 0.74rem;
    line-height: 1.55;
  }
  .shm-cc-actions { width: 100%; }
  .shm-cc-btn {
    flex: 1;
    text-align: center;
    padding: 0.78rem 0.85rem;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }
}