/* ════════════════════════════════════════════════════════════════
   VISHWOKARMA LABS — THEME SYSTEM
   theme.css  ·  add AFTER style.css in index.html

   Strategy: override the CSS custom properties defined in style.css
   (--paper, --ink, --ink-muted, --ink-faint, --rule, --mono, --sans)
   so existing rules update automatically.
   A small set of targeted overrides handles the hardcoded values
   (section--dark #111, footer rgba colours, contact tagline, etc.)
   ════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────
   GLOBAL TRANSITIONS — smooth all theme swaps
   ────────────────────────────────────────────────────────────── */
body,
.nav, .nav__inner,
.hero, .section, .section--dark, .section--ruled,
.service-card, .pillar, .os-card, .ep,
.product-card, .filter-btn,
.auth-modal, .cart-drawer, .user-menu,
.ticker, .footer,
.btn, .btn--ink, .btn--outline, .btn--light {
  transition:
    background-color 0.35s ease,
    background      0.35s ease,
    color           0.35s ease,
    border-color    0.35s ease,
    box-shadow      0.35s ease,
    backdrop-filter 0.35s ease;
}


/* ════════════════════════════════════════════════════════════════
   1. DARK THEME  [data-theme="dark"]
      Also applied when [data-theme="default"][data-mode="dark"]
   ════════════════════════════════════════════════════════════════ */
html[data-theme="dark"],
html[data-theme="default"][data-mode="dark"] {
  --paper:      #141414;
  --paper-mid:  #1e1e1e;
  --paper-deep: #262626;
  --ink:        #f0ebe0;
  --ink-muted:  #bab2a0;
  --ink-faint:  #6a6258;
  --rule:       rgba(255,255,255,0.08);
  --shadow:     rgba(0,0,0,0.50);
  --line-clr:   rgba(255,255,255,0.028);
  --margin-clr: rgba(255,255,255,0.045);
  /* fonts stay the same — only changed by data-font */
}

/* Dark body: keep the ruled-paper pattern but as dark lines */
html[data-theme="dark"] body,
html[data-theme="default"][data-mode="dark"] body {
  background-color: #141414;
  background-image:
    linear-gradient(90deg,
      transparent 79px,
      rgba(255,255,255,0.045) 79px,
      rgba(255,255,255,0.045) 80px,
      transparent 80px
    ),
    repeating-linear-gradient(180deg,
      transparent 0px,
      transparent calc(var(--line-h) - 1px),
      rgba(255,255,255,0.028) calc(var(--line-h) - 1px),
      rgba(255,255,255,0.028) var(--line-h)
    );
  /* drop the paper-texture.jpg in dark — causes muddy overlap */
  background-size: 100% var(--line-h), 100% var(--line-h);
  background-attachment: local, local;
}

/* Dark: section--dark gets even deeper */
html[data-theme="dark"] .section--dark,
html[data-theme="default"][data-mode="dark"] .section--dark {
  background-color: #0d0d0d !important;
}

/* Dark: ticker text is white on dark-ink bg — keep white */
html[data-theme="dark"] .ticker__track span,
html[data-theme="default"][data-mode="dark"] .ticker__track span {
  color: rgba(26,26,26,0.75) !important; /* dark text on cream ticker */
}

/* Dark: footer uses var(--ink) as bg → now cream; fix text colours */
html[data-theme="dark"] .footer__slogan,
html[data-theme="default"][data-mode="dark"] .footer__slogan {
  color: rgba(26,26,26,0.40) !important;
}
html[data-theme="dark"] .footer__copy,
html[data-theme="default"][data-mode="dark"] .footer__copy {
  color: rgba(26,26,26,0.30) !important;
}
html[data-theme="dark"] .footer__logo,
html[data-theme="default"][data-mode="dark"] .footer__logo {
  color: #1a1a1a !important;
}

/* Dark: contact tagline uses var(--paper) which is now #141414 → fix */
html[data-theme="dark"] .contact__tagline,
html[data-theme="default"][data-mode="dark"] .contact__tagline {
  color: #f0ebe0 !important;
}

/* Dark: auth modal inputs */
html[data-theme="dark"] .form-group input,
html[data-theme="default"][data-mode="dark"] .form-group input {
  background: var(--paper-mid) !important;
  border-color: var(--rule) !important;
  color: var(--ink) !important;
}
html[data-theme="dark"] .form-group input:focus,
html[data-theme="default"][data-mode="dark"] .form-group input:focus {
  border-color: var(--ink) !important;
}

/* Dark: nav torn-paper edge colour matches new --paper */
html[data-theme="dark"] .nav.scrolled::after,
html[data-theme="default"][data-mode="dark"] .nav.scrolled::after {
  background: var(--paper);
}


/* ════════════════════════════════════════════════════════════════
   2. SEPIA / VINTAGE THEME  [data-theme="sepia"]
   ════════════════════════════════════════════════════════════════ */
html[data-theme="sepia"] {
  --paper:      #f5ecd7;
  --paper-mid:  #ede0c4;
  --paper-deep: #e4d5b3;
  --ink:        #3d2b1f;
  --ink-muted:  #6b4c38;
  --ink-faint:  #b09070;
  --rule:       rgba(61,43,31,0.12);
  --shadow:     rgba(61,43,31,0.09);
  --line-clr:   rgba(61,43,31,0.06);
  --margin-clr: rgba(61,43,31,0.20);
}

/* Sepia: warm dark section */
html[data-theme="sepia"] .section--dark {
  background-color: #2a1f15 !important;
  background-image:
    repeating-linear-gradient(-52deg, transparent 0, transparent 5px, rgba(255,220,150,0.02) 5px, rgba(255,220,150,0.02) 6px),
    repeating-linear-gradient( 42deg, transparent 0, transparent 8px, rgba(255,220,150,0.015) 8px, rgba(255,220,150,0.015) 9px) !important;
}

/* Sepia + dark mode */
html[data-theme="sepia"][data-mode="dark"] {
  --paper:      #1e1610;
  --paper-mid:  #261c14;
  --paper-deep: #2e221a;
  --ink:        #f0dfc0;
  --ink-muted:  #c8a878;
  --ink-faint:  #7a6050;
  --rule:       rgba(255,220,150,0.08);
  --line-clr:   rgba(255,220,150,0.03);
  --margin-clr: rgba(255,220,150,0.05);
}

html[data-theme="sepia"][data-mode="dark"] body {
  background-color: #1e1610;
  background-image:
    linear-gradient(90deg, transparent 79px, rgba(255,220,150,0.04) 79px, rgba(255,220,150,0.04) 80px, transparent 80px),
    repeating-linear-gradient(180deg, transparent 0px, transparent calc(var(--line-h) - 1px), rgba(255,220,150,0.025) calc(var(--line-h) - 1px), rgba(255,220,150,0.025) var(--line-h));
  background-size: 100% var(--line-h), 100% var(--line-h);
  background-attachment: local, local;
}

html[data-theme="sepia"][data-mode="dark"] .contact__tagline {
  color: #f0dfc0 !important;
}
html[data-theme="sepia"][data-mode="dark"] .footer__slogan { color: rgba(30,22,16,0.40) !important; }
html[data-theme="sepia"][data-mode="dark"] .footer__copy   { color: rgba(30,22,16,0.30) !important; }
html[data-theme="sepia"][data-mode="dark"] .footer__logo   { color: #1e1610 !important; }


/* ════════════════════════════════════════════════════════════════
   3. MINIMAL / CLEAN THEME  [data-theme="minimal"]
   ════════════════════════════════════════════════════════════════ */
html[data-theme="minimal"] {
  --paper:      #ffffff;
  --paper-mid:  #f5f5f5;
  --paper-deep: #efefef;
  --ink:        #111111;
  --ink-muted:  #444444;
  --ink-faint:  #999999;
  --rule:       rgba(0,0,0,0.07);
  --shadow:     rgba(0,0,0,0.05);
  --line-clr:   rgba(0,0,0,0);   /* no lines */
  --margin-clr: rgba(0,0,0,0);   /* no margin line */
}

/* Minimal: clean white body, no ruled lines, no texture */
html[data-theme="minimal"] body {
  background-color: #ffffff;
  background-image: none;
}

/* Minimal: remove hand-drawn filters for clean look */
html[data-theme="minimal"] .service-card,
html[data-theme="minimal"] .btn,
html[data-theme="minimal"] .auth-modal,
html[data-theme="minimal"] .os-card,
html[data-theme="minimal"] .play-btn,
html[data-theme="minimal"] .event-card,
html[data-theme="minimal"] .user-menu {
  filter: none !important;
}

/* Minimal: clean section--dark */
html[data-theme="minimal"] .section--dark {
  background-color: #111111 !important;
  background-image: none !important;
}

/* Minimal: add subtle radius to cards */
html[data-theme="minimal"] .service-card,
html[data-theme="minimal"] .os-card,
html[data-theme="minimal"] .auth-modal,
html[data-theme="minimal"] .cart-drawer,
html[data-theme="minimal"] .user-menu {
  border-radius: 8px;
}
html[data-theme="minimal"] .product-card { border-radius: 6px; }

/* Minimal + dark mode */
html[data-theme="minimal"][data-mode="dark"] {
  --paper:      #111111;
  --paper-mid:  #1a1a1a;
  --paper-deep: #222222;
  --ink:        #f5f5f5;
  --ink-muted:  #bbbbbb;
  --ink-faint:  #777777;
  --rule:       rgba(255,255,255,0.08);
  --shadow:     rgba(0,0,0,0.4);
}

html[data-theme="minimal"][data-mode="dark"] body {
  background-color: #111111;
  background-image: none;
}

html[data-theme="minimal"][data-mode="dark"] .section--dark {
  background-color: #080808 !important;
  background-image: none !important;
}

html[data-theme="minimal"][data-mode="dark"] .contact__tagline { color: #f5f5f5 !important; }
html[data-theme="minimal"][data-mode="dark"] .footer__slogan   { color: rgba(17,17,17,0.40) !important; }
html[data-theme="minimal"][data-mode="dark"] .footer__copy     { color: rgba(17,17,17,0.30) !important; }
html[data-theme="minimal"][data-mode="dark"] .footer__logo     { color: #111111 !important; }

html[data-theme="minimal"][data-mode="dark"] .form-group input {
  background: var(--paper-mid) !important;
  border-color: var(--rule) !important;
  color: var(--ink) !important;
}


/* ════════════════════════════════════════════════════════════════
   4. GLASS / GLASSMORPHIC THEME  [data-theme="glass"]
   ════════════════════════════════════════════════════════════════ */
html[data-theme="glass"] {
  --paper:      rgba(255,255,255,0.08);
  --paper-mid:  rgba(255,255,255,0.12);
  --paper-deep: rgba(255,255,255,0.06);
  --ink:        #ffffff;
  --ink-muted:  rgba(255,255,255,0.80);
  --ink-faint:  rgba(255,255,255,0.45);
  --rule:       rgba(255,255,255,0.15);
  --shadow:     rgba(0,0,0,0.30);
  --line-clr:   rgba(0,0,0,0);
  --margin-clr: rgba(0,0,0,0);
}

/* Glass: full-page gradient on html, body transparent */
html[data-theme="glass"] {
  background:
    radial-gradient(ellipse at 15% 15%, rgba(138,43,226,0.30) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(0,191,255,0.22) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,20,147,0.10) 0%, transparent 60%),
    linear-gradient(135deg, #1a0533 0%, #0d1b6e 35%, #0a3d5c 65%, #0d2233 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme="glass"] body {
  background: transparent !important;
  background-image: none !important;
}

/* Glass: cards get backdrop-filter */
html[data-theme="glass"] .service-card,
html[data-theme="glass"] .os-card,
html[data-theme="glass"] .ep,
html[data-theme="glass"] .pillar,
html[data-theme="glass"] .product-card {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(18px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  filter: none !important; /* remove f-rough in glass mode */
}

html[data-theme="glass"] .service-card:hover,
html[data-theme="glass"] .os-card:hover,
html[data-theme="glass"] .ep:hover {
  background: rgba(255,255,255,0.13) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

/* Glass: section--dark gets frosted treatment */
html[data-theme="glass"] .section--dark {
  background-color: rgba(0,0,0,0.25) !important;
  background-image: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Glass: nav */
html[data-theme="glass"] .nav.scrolled {
  background: rgba(10,5,30,0.55) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  filter: none !important;
}
html[data-theme="glass"] .nav.scrolled::after {
  display: none; /* no torn edge in glass mode */
}

/* Glass: auth modal + cart + user menu */
html[data-theme="glass"] .auth-modal,
html[data-theme="glass"] .cart-drawer,
html[data-theme="glass"] .user-menu {
  background: rgba(10,5,30,0.72) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  filter: none !important;
}

/* Glass: buttons */
html[data-theme="glass"] .btn--ink {
  background: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.35) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
}
html[data-theme="glass"] .btn--ink:hover {
  background: rgba(255,255,255,0.28) !important;
}
html[data-theme="glass"] .btn--outline {
  border-color: rgba(255,255,255,0.45) !important;
  color: #ffffff !important;
}

/* Glass: footer */
html[data-theme="glass"] .footer {
  background: rgba(0,0,0,0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-top-color: rgba(255,255,255,0.10) !important;
}
html[data-theme="glass"] .footer__logo { color: rgba(255,255,255,0.90) !important; }
html[data-theme="glass"] .footer__slogan { color: rgba(255,255,255,0.35) !important; }
html[data-theme="glass"] .footer__copy { color: rgba(255,255,255,0.25) !important; }

/* Glass: ticker */
html[data-theme="glass"] .ticker {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html[data-theme="glass"] .ticker__track span { color: rgba(255,255,255,0.75) !important; }

/* Glass: colorful images — un-greyscale them */
html[data-theme="glass"] img,
html[data-theme="glass"] video,
html[data-theme="glass"] .event-card__media,
html[data-theme="glass"] .ep__thumb,
html[data-theme="glass"] .os-card__thumb {
  filter: none !important;
}

/* Glass: form inputs */
html[data-theme="glass"] .form-group input,
html[data-theme="glass"] .form-field input,
html[data-theme="glass"] .form-field textarea {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
}
html[data-theme="glass"] .form-group input::placeholder,
html[data-theme="glass"] .form-field input::placeholder,
html[data-theme="glass"] .form-field textarea::placeholder {
  color: rgba(255,255,255,0.30) !important;
}

/* Glass: contact tagline */
html[data-theme="glass"] .contact__tagline { color: #ffffff !important; }
html[data-theme="glass"] .contact__row span { color: rgba(255,255,255,0.65) !important; }
html[data-theme="glass"] .contact__row a { color: #ffffff !important; }


/* ════════════════════════════════════════════════════════════════
   5. NEON / CYBERPUNK THEME  [data-theme="neon"]
   ════════════════════════════════════════════════════════════════ */
html[data-theme="neon"] {
  --paper:      #08081a;
  --paper-mid:  #0e0e24;
  --paper-deep: #14142c;
  --ink:        #00ffc8;
  --ink-muted:  #a0c0e0;
  --ink-faint:  #405080;
  --rule:       rgba(0,255,200,0.12);
  --shadow:     rgba(0,255,200,0.08);
  --line-clr:   rgba(0,255,200,0.05);
  --margin-clr: rgba(0,255,200,0.08);
}

html[data-theme="neon"] body {
  background-color: #04040e;
  background-image:
    linear-gradient(90deg, transparent 79px, rgba(0,255,200,0.06) 79px, rgba(0,255,200,0.06) 80px, transparent 80px),
    repeating-linear-gradient(180deg, transparent 0px, transparent calc(var(--line-h) - 1px), rgba(0,255,200,0.04) calc(var(--line-h) - 1px), rgba(0,255,200,0.04) var(--line-h));
  background-size: 100% var(--line-h), 100% var(--line-h);
  background-attachment: local, local;
}

/* Neon: section--dark gets near-black + keep scribble faintly */
html[data-theme="neon"] .section--dark {
  background-color: #020208 !important;
  background-image:
    repeating-linear-gradient(-52deg, transparent 0, transparent 5px, rgba(0,255,200,0.015) 5px, rgba(0,255,200,0.015) 6px),
    repeating-linear-gradient( 42deg, transparent 0, transparent 8px, rgba(0,255,200,0.010) 8px, rgba(0,255,200,0.010) 9px) !important;
}

/* Neon: headings glow */
html[data-theme="neon"] h1,
html[data-theme="neon"] h2,
html[data-theme="neon"] .hero__title {
  color: #00ffc8 !important;
  text-shadow: 0 0 18px rgba(0,255,200,0.55), 0 0 50px rgba(0,255,200,0.20) !important;
  filter: none !important; /* no pencil filter in neon */
}
html[data-theme="neon"] h3,
html[data-theme="neon"] h4 {
  color: #00ffc8 !important;
  filter: none !important;
}

/* Neon: section tag */
html[data-theme="neon"] .section__tag { color: rgba(0,255,200,0.55) !important; }
html[data-theme="neon"] .section__tag--light { color: rgba(0,255,200,0.55) !important; }

/* Neon: cards glow border */
html[data-theme="neon"] .service-card,
html[data-theme="neon"] .os-card,
html[data-theme="neon"] .ep,
html[data-theme="neon"] .pillar,
html[data-theme="neon"] .product-card {
  background: var(--paper-mid) !important;
  border-color: rgba(0,255,200,0.20) !important;
  box-shadow: 0 0 16px rgba(0,255,200,0.06) !important;
  filter: none !important;
}

html[data-theme="neon"] .service-card:hover,
html[data-theme="neon"] .os-card:hover,
html[data-theme="neon"] .ep:hover,
html[data-theme="neon"] .product-card:hover {
  border-color: rgba(0,255,200,0.55) !important;
  box-shadow: 0 0 28px rgba(0,255,200,0.18) !important;
}

/* Neon: buttons */
html[data-theme="neon"] .btn--ink {
  background: #00ffc8 !important;
  color: #04040e !important;
  border-color: #00ffc8 !important;
  box-shadow: 0 0 20px rgba(0,255,200,0.45) !important;
}
html[data-theme="neon"] .btn--ink:hover {
  background: #00e6b4 !important;
  box-shadow: 0 0 30px rgba(0,255,200,0.60) !important;
}
html[data-theme="neon"] .btn--outline {
  border-color: #00ffc8 !important;
  color: #00ffc8 !important;
  box-shadow: 0 0 10px rgba(0,255,200,0.18) !important;
}
html[data-theme="neon"] .btn--outline:hover {
  background: rgba(0,255,200,0.08) !important;
  box-shadow: 0 0 20px rgba(0,255,200,0.35) !important;
}

/* Neon: ticker — gradient strip */
html[data-theme="neon"] .ticker {
  background: linear-gradient(90deg, rgba(0,255,200,0.15), rgba(255,0,170,0.15)) !important;
  border-top: 1px solid rgba(0,255,200,0.15) !important;
  border-bottom: 1px solid rgba(0,255,200,0.15) !important;
}
html[data-theme="neon"] .ticker__track span { color: rgba(0,255,200,0.80) !important; }

/* Neon: footer */
html[data-theme="neon"] .footer {
  background: #020208 !important;
  border-top: 1px solid rgba(0,255,200,0.12) !important;
}
html[data-theme="neon"] .footer__logo   { color: #00ffc8 !important; }
html[data-theme="neon"] .footer__slogan { color: rgba(0,255,200,0.35) !important; }
html[data-theme="neon"] .footer__copy   { color: rgba(0,255,200,0.20) !important; }

/* Neon: nav */
html[data-theme="neon"] .nav.scrolled {
  background: rgba(4,4,14,0.97) !important;
  border-bottom: 1px solid rgba(0,255,200,0.15) !important;
}
html[data-theme="neon"] .nav.scrolled::after { display: none; }
html[data-theme="neon"] .nav__links a { color: rgba(0,255,200,0.65) !important; }
html[data-theme="neon"] .nav__links a:hover { color: #00ffc8 !important; }
html[data-theme="neon"] .logo-name { color: #00ffc8 !important; }

/* Neon: play btn glow */
html[data-theme="neon"] .play-btn {
  border-color: #00ffc8 !important;
  color: #00ffc8 !important;
  filter: none !important;
}
html[data-theme="neon"] .play-btn:hover {
  background: #00ffc8 !important;
  color: #04040e !important;
  box-shadow: 0 0 20px rgba(0,255,200,0.5) !important;
}

/* Neon: auth/cart modal */
html[data-theme="neon"] .auth-modal,
html[data-theme="neon"] .cart-drawer,
html[data-theme="neon"] .user-menu {
  background: #0a0a1e !important;
  border-color: rgba(0,255,200,0.25) !important;
  filter: none !important;
}
html[data-theme="neon"] .auth-tab-btn.active { border-bottom-color: #00ffc8 !important; color: #00ffc8 !important; }
html[data-theme="neon"] .form-group input {
  background: rgba(0,255,200,0.05) !important;
  border-color: rgba(0,255,200,0.20) !important;
  color: #e0e0ff !important;
}
html[data-theme="neon"] .form-group input:focus { border-color: #00ffc8 !important; }

/* Neon: contact */
html[data-theme="neon"] .contact__tagline { color: #00ffc8 !important; }
html[data-theme="neon"] .filter-btn.active {
  background: rgba(0,255,200,0.12) !important;
  border-color: #00ffc8 !important;
  color: #00ffc8 !important;
}

/* Neon: colorful images */
html[data-theme="neon"] img,
html[data-theme="neon"] .event-card__media,
html[data-theme="neon"] .ep__thumb,
html[data-theme="neon"] .os-card__thumb {
  filter: grayscale(30%) hue-rotate(120deg) brightness(0.9) !important;
}


/* ════════════════════════════════════════════════════════════════
   6. FONT OVERRIDES  [data-font="X"]
   Overrides both the CSS variables and the hardcoded
   'Patrick Hand' values in style.css
   ════════════════════════════════════════════════════════════════ */
html[data-font="roboto"]           { --mono: 'Roboto', sans-serif;           --sans: 'Roboto', sans-serif; }
html[data-font="orbitron"]         { --mono: 'Orbitron', sans-serif;         --sans: 'Orbitron', sans-serif; }
html[data-font="comic-neue"]       { --mono: 'Comic Neue', cursive;          --sans: 'Comic Neue', cursive; }
html[data-font="dancing-script"]   { --mono: 'Dancing Script', cursive;      --sans: 'Dancing Script', cursive; }
html[data-font="playfair-display"] { --mono: 'Playfair Display', serif;      --sans: 'Playfair Display', serif; }
html[data-font="space-mono"]       { --mono: 'Space Mono', monospace;        --sans: 'Space Mono', monospace; }
html[data-font="bebas-neue"]       { --mono: 'Bebas Neue', sans-serif;       --sans: 'Bebas Neue', sans-serif; }
html[data-font="pacifico"]         { --mono: 'Pacifico', cursive;            --sans: 'Pacifico', cursive; }
html[data-font="ibm-plex-mono"]    { --mono: 'IBM Plex Mono', monospace;     --sans: 'IBM Plex Mono', monospace; }
html[data-font="cinzel"]           { --mono: 'Cinzel', serif;                --sans: 'Cinzel', serif; }
html[data-font="permanent-marker"] { --mono: 'Permanent Marker', cursive;   --sans: 'Permanent Marker', cursive; }

/* Override the hardcoded 'Patrick Hand' font-family declarations in style.css
   body uses var(--sans) so it auto-updates; h1-h4 and others are hardcoded → override */
html[data-font]:not([data-font="patrick-hand"]) h1,
html[data-font]:not([data-font="patrick-hand"]) h2,
html[data-font]:not([data-font="patrick-hand"]) h3,
html[data-font]:not([data-font="patrick-hand"]) h4,
html[data-font]:not([data-font="patrick-hand"]) .btn,
html[data-font]:not([data-font="patrick-hand"]) .nav__links a,
html[data-font]:not([data-font="patrick-hand"]) .logo-name,
html[data-font]:not([data-font="patrick-hand"]) .hero__eyebrow,
html[data-font]:not([data-font="patrick-hand"]) .hero__slogan,
html[data-font]:not([data-font="patrick-hand"]) .hero__desc,
html[data-font]:not([data-font="patrick-hand"]) .section__tag,
html[data-font]:not([data-font="patrick-hand"]) .service-card__label,
html[data-font]:not([data-font="patrick-hand"]) .service-card h3,
html[data-font]:not([data-font="patrick-hand"]) .service-card p,
html[data-font]:not([data-font="patrick-hand"]) .pillar__text,
html[data-font]:not([data-font="patrick-hand"]) .pillar__n,
html[data-font]:not([data-font="patrick-hand"]) .social-pill,
html[data-font]:not([data-font="patrick-hand"]) .filter-btn,
html[data-font]:not([data-font="patrick-hand"]) .prod-add,
html[data-font]:not([data-font="patrick-hand"]) .auth-tab-btn,
html[data-font]:not([data-font="patrick-hand"]) .switch-tab,
html[data-font]:not([data-font="patrick-hand"]) .auth-hint {
  font-family: var(--sans) !important;
}


/* ════════════════════════════════════════════════════════════════
   7. CUSTOM BACKGROUND IMAGE  [data-bg="custom"]
   JS sets --custom-bg to url("...") on <html> and sets data-bg="custom".
   Each theme applies an appropriate overlay so text stays readable.
   ════════════════════════════════════════════════════════════════ */

/* Default (light paperistic) overlay: warm cream at 82% opacity */
html[data-bg="custom"] body,
html[data-theme="default"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(246,246,244,0.82), rgba(246,246,244,0.82)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}

/* Dark (Ink Night) overlay */
html[data-theme="dark"][data-bg="custom"] body,
html[data-theme="default"][data-mode="dark"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(14,14,14,0.88), rgba(14,14,14,0.88)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}

/* Sepia (Vintage) overlay */
html[data-theme="sepia"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(245,236,215,0.82), rgba(245,236,215,0.82)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}
html[data-theme="sepia"][data-mode="dark"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(20,16,10,0.88), rgba(20,16,10,0.88)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}

/* Minimal overlay */
html[data-theme="minimal"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(255,255,255,0.82), rgba(255,255,255,0.82)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}
html[data-theme="minimal"][data-mode="dark"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(11,11,11,0.88), rgba(11,11,11,0.88)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}

/* Neon (Cyberpunk) overlay */
html[data-theme="neon"][data-bg="custom"] body {
  background-image:
    linear-gradient(rgba(4,4,14,0.88), rgba(4,4,14,0.88)),
    var(--custom-bg, none) !important;
  background-size: 100% 100%, cover !important;
  background-position: center, center !important;
  background-attachment: fixed, fixed !important;
  background-repeat: repeat, no-repeat !important;
}

/* Glass: bg is on <html> not <body>; blend the custom image in */
html[data-theme="glass"][data-bg="custom"] {
  background:
    radial-gradient(ellipse at 15% 15%, rgba(138,43,226,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(0,191,255,0.18) 0%, transparent 50%),
    linear-gradient(rgba(10,5,30,0.70), rgba(10,5,30,0.70)),
    var(--custom-bg, none) !important;
  background-size: auto, auto, 100% 100%, cover !important;
  background-position: 15% 15%, 85% 80%, center, center !important;
  background-attachment: fixed, fixed, fixed, fixed !important;
  background-repeat: no-repeat, no-repeat, repeat, no-repeat !important;
}


/* ════════════════════════════════════════════════════════════════
   8. THEME SELECTOR PANEL UI
   ════════════════════════════════════════════════════════════════ */

/* Trigger button — sits in .nav__right before .hamburger */
.theme-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  transition: color 0.2s, transform 0.25s;
  filter: url(#f-rough);
}
.theme-btn:hover {
  color: var(--ink);
  transform: rotate(20deg) scale(1.08);
}

/* Backdrop */
.theme-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 850;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.theme-backdrop.open {
  opacity: 1;
  pointer-events: all;
}

/* Panel — slides in from right */
.theme-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 310px;
  max-width: 88vw;
  z-index: 870;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
}
.theme-panel.open { transform: translateX(0); }

/* Panel inner */
.theme-panel__inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: var(--paper);
  border-left: 1.5px solid var(--rule);
  /* torn left edge — same as nav scrolled::after but vertical */
  position: relative;
}

/* Glass + neon get special panel treatment */
html[data-theme="glass"] .theme-panel__inner {
  background: rgba(8,5,25,0.80);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-left: 1px solid rgba(255,255,255,0.15);
}
html[data-theme="neon"] .theme-panel__inner {
  background: #06061a;
  border-left: 1px solid rgba(0,255,200,0.20);
}

/* Panel header */
.theme-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.theme-panel__title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  filter: url(#f-rough);
}

html[data-theme="neon"] .theme-panel__title { color: rgba(0,255,200,0.60); filter: none; }
html[data-theme="glass"] .theme-panel__title { color: rgba(255,255,255,0.50); filter: none; }

.theme-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px 8px;
  color: var(--ink-faint);
  transition: color 0.2s;
  line-height: 1;
}
.theme-panel__close:hover { color: var(--ink); }

/* Panel sections */
.theme-panel__section {
  padding: 16px 20px 12px;
  border-bottom: 1px dashed var(--rule);
  flex-shrink: 0;
}

.theme-panel__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
html[data-theme="neon"] .theme-panel__label   { color: rgba(0,255,200,0.45); }
html[data-theme="glass"] .theme-panel__label  { color: rgba(255,255,255,0.40); }

/* Mode toggle */
.theme-mode-toggle {
  display: flex;
  gap: 8px;
}

.theme-mode-btn {
  flex: 1;
  padding: 8px 10px;
  background: none;
  border: 1.5px solid var(--rule);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-muted);
  transition: all 0.2s;
  filter: url(#f-rough);
}
.theme-mode-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
html[data-theme="neon"] .theme-mode-btn { border-color: rgba(0,255,200,0.20); color: #a0c0e0; filter: none; }
html[data-theme="neon"] .theme-mode-btn.active { background: #00ffc8; color: #04040e; border-color: #00ffc8; box-shadow: 0 0 12px rgba(0,255,200,0.4); }
html[data-theme="glass"] .theme-mode-btn { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.55); filter: none; }
html[data-theme="glass"] .theme-mode-btn.active { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.50); color: #fff; }

/* Theme swatches grid */
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.theme-swatch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 6px 4px;
  border: 1.5px solid transparent;
  background: none;
  transition: border-color 0.2s;
  filter: url(#f-rough);
}
.theme-swatch.active {
  border-color: var(--ink);
}
html[data-theme="neon"]  .theme-swatch        { filter: none; }
html[data-theme="neon"]  .theme-swatch.active { border-color: #00ffc8; box-shadow: 0 0 8px rgba(0,255,200,0.3); }
html[data-theme="glass"] .theme-swatch        { filter: none; }
html[data-theme="glass"] .theme-swatch.active { border-color: rgba(255,255,255,0.70); }

.theme-swatch__preview {
  width: 100%;
  height: 42px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
}

.theme-swatch__name {
  font-family: var(--mono);
  font-size: 10px;
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
html[data-theme="neon"]  .theme-swatch__name { color: rgba(0,255,200,0.50); }
html[data-theme="glass"] .theme-swatch__name { color: rgba(255,255,255,0.45); }

/* Font list */
.theme-fonts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.theme-font-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  text-align: left;
  width: 100%;
  transition: background 0.15s;
  border-radius: 2px;
  gap: 8px;
}
.theme-font-opt:hover    { background: var(--paper-mid); }
.theme-font-opt.active   { border-color: var(--rule); background: var(--paper-mid); }

html[data-theme="neon"] .theme-font-opt:hover  { background: rgba(0,255,200,0.05); }
html[data-theme="neon"] .theme-font-opt.active { border-color: rgba(0,255,200,0.25); background: rgba(0,255,200,0.04); }
html[data-theme="glass"] .theme-font-opt:hover  { background: rgba(255,255,255,0.06); }
html[data-theme="glass"] .theme-font-opt.active { border-color: rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); }

.theme-font-name {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.1;
  display: block;
}
.theme-font-preview {
  font-size: 10px;
  color: var(--ink-faint);
  margin-top: 2px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-font-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Panel footer */
.theme-panel__footer {
  margin-top: auto;
  padding: 14px 20px 20px;
  border-top: 1px dashed var(--rule);
  flex-shrink: 0;
}

.theme-reset-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1.5px dashed var(--rule);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  transition: all 0.2s;
  filter: url(#f-rough);
}
.theme-reset-btn:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-mid);
}
html[data-theme="neon"] .theme-reset-btn {
  filter: none;
  border-color: rgba(0,255,200,0.20);
  color: rgba(0,255,200,0.45);
}
html[data-theme="neon"] .theme-reset-btn:hover {
  border-color: #00ffc8;
  color: #00ffc8;
  background: rgba(0,255,200,0.05);
  box-shadow: 0 0 10px rgba(0,255,200,0.15);
}
html[data-theme="glass"] .theme-reset-btn {
  filter: none;
  border-color: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.40);
}
html[data-theme="glass"] .theme-reset-btn:hover {
  border-color: rgba(255,255,255,0.55);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
}


/* ════════════════════════════════════════════════════════════════
   9. BACKGROUND UPLOAD SECTION UI
   ════════════════════════════════════════════════════════════════ */

.theme-bg-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Thumbnail preview strip */
.theme-bg-preview {
  width: 100%;
  height: 64px;
  border-radius: 3px;
  border: 1.5px dashed var(--rule);
  background: var(--paper-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transition: opacity 0.25s, border-color 0.2s;
}
html[data-theme="neon"] .theme-bg-preview {
  border-color: rgba(0,255,200,0.18);
  background: rgba(0,255,200,0.03);
}
html[data-theme="glass"] .theme-bg-preview {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
}

.theme-bg-none {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  pointer-events: none;
  user-select: none;
}
html[data-theme="neon"]  .theme-bg-none { color: rgba(0,255,200,0.35); }
html[data-theme="glass"] .theme-bg-none { color: rgba(255,255,255,0.30); }

/* Buttons row */
.theme-bg-btns {
  display: flex;
  gap: 6px;
}

/* Upload label (acts as a button) */
.theme-bg-upload-lbl {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  cursor: pointer;
  border: 1.5px solid var(--rule);
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  border-radius: 2px;
  transition: all 0.2s;
  filter: url(#f-rough);
  position: relative;  /* for the hidden input */
  user-select: none;
}
.theme-bg-upload-lbl:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-mid);
}
html[data-theme="neon"] .theme-bg-upload-lbl {
  filter: none;
  border-color: rgba(0,255,200,0.20);
  color: rgba(0,255,200,0.55);
}
html[data-theme="neon"] .theme-bg-upload-lbl:hover {
  border-color: #00ffc8;
  color: #00ffc8;
  background: rgba(0,255,200,0.05);
  box-shadow: 0 0 8px rgba(0,255,200,0.15);
}
html[data-theme="glass"] .theme-bg-upload-lbl {
  filter: none;
  border-color: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.50);
}
html[data-theme="glass"] .theme-bg-upload-lbl:hover {
  border-color: rgba(255,255,255,0.50);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.06);
}

/* Remove button */
.theme-bg-remove-btn {
  display: none;   /* shown via JS only when bg is active */
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px;
  cursor: pointer;
  border: 1.5px solid var(--rule);
  background: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-faint);
  border-radius: 2px;
  transition: all 0.2s;
  filter: url(#f-rough);
  white-space: nowrap;
}
.theme-bg-remove-btn:hover {
  border-color: #e05050;
  color: #e05050;
  background: rgba(224,80,80,0.05);
}
html[data-theme="neon"] .theme-bg-remove-btn {
  filter: none;
  border-color: rgba(0,255,200,0.15);
  color: rgba(0,255,200,0.35);
}
html[data-theme="neon"] .theme-bg-remove-btn:hover {
  border-color: #ff4466;
  color: #ff4466;
  background: rgba(255,68,102,0.05);
  box-shadow: none;
}
html[data-theme="glass"] .theme-bg-remove-btn {
  filter: none;
  border-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.35);
}
html[data-theme="glass"] .theme-bg-remove-btn:hover {
  border-color: rgba(255,80,80,0.70);
  color: rgba(255,120,120,0.90);
  background: rgba(255,80,80,0.06);
}

/* Hint line */
.theme-bg-hint {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
}
html[data-theme="neon"]  .theme-bg-hint { color: rgba(0,255,200,0.25); }
html[data-theme="glass"] .theme-bg-hint { color: rgba(255,255,255,0.22); }