/* ============================================================
   CodebyCarter — themes.css
   Full-site theme switcher. Same HTML, five completely different
   aesthetics. "Tell me what you want, I'll build it" — proven.
   ============================================================ */

/* ============================================================
   FLOATING ACTION BUTTON (FAB)
   ============================================================ */
.theme-fab{
  position:fixed;bottom:28px;right:28px;z-index:200;
  width:62px;height:62px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899 50%,#FB923C);
  background-size:220% 220%;animation:hue 6s linear infinite;
  border:2px solid rgba(255,255,255,.95);
  color:#fff;display:grid;place-items:center;
  cursor:none;outline:none;
  box-shadow:0 16px 40px -10px rgba(168,85,247,.60),0 0 0 1px rgba(0,0,0,.08);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.theme-fab::before{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  background:linear-gradient(135deg,#A855F7,#EC4899,#FB923C);
  background-size:200% 200%;animation:hue 6s linear infinite;
  filter:blur(28px);opacity:.50;z-index:-1;
}
.theme-fab:hover{transform:scale(1.10) rotate(20deg)}
.theme-fab.is-active{transform:rotate(135deg)}
.theme-fab.is-active svg{opacity:.6}
.theme-fab svg{transition:opacity .3s}

.theme-fab-pulse{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  animation:fabPulse 2.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes fabPulse{
  0%   {transform:scale(1);opacity:1}
  100% {transform:scale(1.45);opacity:0}
}

.theme-fab-label{
  position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%);
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;
  background:rgba(18,18,24,.94);color:#fff;
  padding:8px 14px;border-radius:99px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .3s, transform .3s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.10);
}
.theme-fab:hover .theme-fab-label{opacity:1;transform:translateY(-50%) translateX(-4px)}

/* ============================================================
   PANEL
   ============================================================ */
.theme-panel{
  position:fixed;bottom:110px;right:28px;z-index:199;
  width:380px;max-width:calc(100vw - 36px);
  background:rgba(16,16,22,.96);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  padding:26px 26px 22px;
  color:#F5F5F7;
  opacity:0;pointer-events:none;
  transform:translateY(20px) scale(.94);
  transform-origin:bottom right;
  transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1);
  box-shadow:0 36px 90px -14px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04);
}
.theme-panel.is-open{
  opacity:1;pointer-events:auto;
  transform:translateY(0) scale(1);
}

.theme-panel-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#EC4899;font-weight:700;
  margin-bottom:8px;display:inline-flex;align-items:center;gap:8px;
}
.theme-panel-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;background:#EC4899;
  box-shadow:0 0 8px #EC4899;animation:tpDot 1.5s ease-in-out infinite;
}
@keyframes tpDot{0%,100%{opacity:1}50%{opacity:.35}}

.theme-panel-h{
  font-size:26px;font-weight:600;letter-spacing:-.025em;
  margin-bottom:6px;line-height:1.1;color:#F5F5F7;
}
.theme-panel-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.theme-panel-sub{
  font-size:13px;line-height:1.55;color:rgba(245,245,247,.65);
  margin-bottom:22px;
}
.theme-panel-sub em{
  font-style:italic;font-family:'Instrument Serif',serif;
  color:rgba(245,245,247,.85);font-size:1.05em;
}
.theme-panel-sub b{color:#EC4899;font-weight:700}

.theme-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.theme-tile{
  position:relative;cursor:none;overflow:hidden;
  border:1.5px solid rgba(255,255,255,.10);border-radius:14px;
  padding:12px 14px 12px;
  background:transparent;
  text-align:left;color:inherit;
  font:inherit;
  transition:transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, background .35s ease;
}
.theme-tile:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.02)}
.theme-tile.is-active{border-color:#EC4899;background:rgba(236,72,153,.10);box-shadow:0 0 0 1px #EC4899}
.theme-tile.is-active::after{
  content:"✓";position:absolute;top:8px;right:10px;
  width:18px;height:18px;border-radius:50%;
  background:#EC4899;color:#fff;
  display:grid;place-items:center;
  font-size:10px;font-weight:900;
}

.theme-tile-preview{
  height:54px;border-radius:8px;margin-bottom:10px;
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.theme-tile-name{
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:#F5F5F7;
}
.theme-tile-tag{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,245,247,.50);font-weight:600;
  margin-top:3px;
}

/* Per-theme tile previews — visual swatches */
/* === ONYX (Signature default — Black + Champagne) === */
.theme-tile[data-theme-set="signature"] .theme-tile-preview{
  background:radial-gradient(circle at 50% 70%, rgba(212,164,55,.30), transparent 65%), #050505;
}
.theme-tile[data-theme-set="signature"] .theme-tile-preview::before{
  content:"c.";position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:26px;
  background:linear-gradient(135deg,#FFE8A0,#D4A437,#B58620);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* === CRIMSON (Wine + Crimson Red) === */
.theme-tile[data-theme-set="red"] .theme-tile-preview{
  background:radial-gradient(circle at 50% 70%, rgba(220,38,38,.40), transparent 65%), linear-gradient(155deg,#1A0A0C 0%,#2A0E12 50%,#0E0606 100%);
}
.theme-tile[data-theme-set="red"] .theme-tile-preview::before{
  content:"c.";position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:26px;
  background:linear-gradient(135deg,#FF8090,#DC143C,#8B0000);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 8px rgba(220,38,38,.40));
}

/* === PAPER (White + Ink + Terracotta) === */
.theme-tile[data-theme-set="editorial"] .theme-tile-preview{
  background:linear-gradient(135deg,#FFFFFF 0%,#F5F2EC 100%);
  border:1px solid rgba(20,20,20,.08);
}
.theme-tile[data-theme-set="editorial"] .theme-tile-preview::before{
  content:"C.";position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;font-size:38px;
  color:#0F0F0F;letter-spacing:-.04em;line-height:1;
}
.theme-tile[data-theme-set="editorial"] .theme-tile-preview::after{
  content:"";position:absolute;bottom:6px;right:6px;
  width:10px;height:10px;border-radius:50%;
  background:#C04127;
  box-shadow:0 0 0 2px #FFFFFF;
}

/* === OCEAN (Deep Navy + Cyan Blue) === */
.theme-tile[data-theme-set="luxe"] .theme-tile-preview{
  background:radial-gradient(circle at 50% 60%, rgba(45,168,224,.30), transparent 65%), linear-gradient(155deg, #051528 0%, #0A2545 50%, #030E1F 100%);
}
.theme-tile[data-theme-set="luxe"] .theme-tile-preview::before{
  content:"";position:absolute;inset:8px;border:1px solid rgba(91,224,250,.40);
  background:radial-gradient(circle at center,rgba(91,224,250,.10),transparent 65%);
}
.theme-tile[data-theme-set="luxe"] .theme-tile-preview::after{
  content:"c.";position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:26px;letter-spacing:-.04em;
  background:linear-gradient(135deg,#5BE0FA,#2DA8E0,#0D5BC8);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(91,224,250,.40));
}

.theme-panel-foot{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(245,245,247,.40);font-weight:600;text-align:center;
}

/* ============================================================
   FLASH TRANSITION when switching themes
   ============================================================ */
body.theme-switching::after{
  content:"";position:fixed;inset:0;z-index:998;
  background:#fff;pointer-events:none;
  animation:themeFlash .65s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes themeFlash{
  0%   {opacity:0}
  18%  {opacity:.95}
  100% {opacity:0}
}

/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║  THEME: CRIMSON (wine-black · cream · bright red)        ║
   ║  Bold, premium, steakhouse luxury. High contrast.        ║
   ╚══════════════════════════════════════════════════════════╝
   ============================================================ */
body[data-theme="red"]{
  background:#150A0C !important;color:#FFF4F0 !important;
}
body[data-theme="red"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 700px at 15% 20%, rgba(220,38,38,.18), transparent 60%),
    radial-gradient(800px 600px at 85% 80%, rgba(139,0,0,.20), transparent 60%),
    #150A0C;
}

body[data-theme="red"] .nav{
  background:rgba(21,10,12,.88) !important;
  border:1px solid rgba(220,38,38,.35) !important;
  box-shadow:0 0 30px rgba(220,38,38,.18) !important;
}
body[data-theme="red"] .brand-mark{
  color:#FFF4F0 !important;
  background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#FFF4F0 !important;
}
body[data-theme="red"] .brand-mark .brand-c,
body[data-theme="red"] .brand-mark::after{
  background:linear-gradient(135deg, #FF8090, #DC143C, #B91C1C) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 8px rgba(220,38,38,.40));
}

body[data-theme="red"] .hero{background:transparent !important;color:#FFF4F0 !important}
body[data-theme="red"] .hero-h1{
  color:#FFF4F0 !important;
  letter-spacing:-.035em !important;
}
body[data-theme="red"] .hero-sub{color:rgba(255,244,240,.82) !important}
body[data-theme="red"] .ital{
  background:linear-gradient(135deg, #FF8090 0%, #DC143C 50%, #B91C1C 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
body[data-theme="red"] .hero-tag{
  color:#FF8090 !important;border-color:rgba(220,38,38,.40) !important;
  background:rgba(220,38,38,.08) !important;
}
body[data-theme="red"] .hero-tag .dot{background:#DC143C !important;box-shadow:0 0 10px #DC143C}

body[data-theme="red"] .btn-grad{
  background:linear-gradient(135deg, #DC143C, #B91C1C) !important;
  color:#FFF4F0 !important;
  border:none !important;
  box-shadow:0 14px 36px -8px rgba(220,38,38,.55) !important;
  font-weight:700 !important;
}
body[data-theme="red"] .btn-grad:hover{
  box-shadow:0 18px 44px -8px rgba(255,128,144,.65) !important;
  filter:brightness(1.10);
}
body[data-theme="red"] .btn-ghost{
  background:rgba(220,38,38,.06) !important;
  border:1px solid rgba(220,38,38,.45) !important;
  color:#FF8090 !important;
}

body[data-theme="red"] .scroll-orb{
  background:radial-gradient(circle, rgba(220,38,38,.45), transparent 70%) !important;
  filter:blur(90px) !important;
}

/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║  THEME: EDITORIAL (Cream paper · Serif elegance)         ║
   ║  Instrument Serif on cream. Refined. Center-aligned hero.║
   ╚══════════════════════════════════════════════════════════╝
   ============================================================ */
body[data-theme="editorial"]{
  background:#FAF7F2 !important;color:#0F0F0F !important;
}
body[data-theme="editorial"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 700px at 50% 90%, rgba(192,65,39,.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F5F2EC 100%);
}
body[data-theme="editorial"] .nav{
  background:rgba(250,244,232,.92) !important;
  border:1px solid rgba(140,36,21,.18) !important;
  box-shadow:0 4px 24px -10px rgba(140,36,21,.10) !important;
}
body[data-theme="editorial"] .brand-mark{
  color:#1E1A14 !important;font-style:italic !important;
  background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#1E1A14 !important;
}
body[data-theme="editorial"] .brand-mark .brand-c,
body[data-theme="editorial"] .brand-mark::after{
  background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#8C2415 !important;
  color:#8C2415 !important;
}

body[data-theme="editorial"] .hero{
  background:transparent !important;color:#1E1A14 !important;
  text-align:center;
}
body[data-theme="editorial"] .hero-h1{
  font-family:'Instrument Serif',serif !important;
  font-style:italic !important;font-weight:400 !important;
  color:#1E1A14 !important;letter-spacing:-.028em !important;
}
body[data-theme="editorial"] .hero-sub{
  color:#3A3024 !important;font-family:'Instrument Serif',serif;font-size:1.12em;
  max-width:60ch;margin-left:auto;margin-right:auto;font-weight:400;
}
body[data-theme="editorial"] .ital{
  background:none !important;
  -webkit-background-clip:initial !important;background-clip:initial !important;
  -webkit-text-fill-color:#8C2415 !important;color:#8C2415 !important;
}
body[data-theme="editorial"] .hero-tag{
  font-family:'JetBrains Mono',monospace !important;font-size:11px !important;
  color:#8C2415 !important;background:rgba(140,36,21,.06) !important;
  border-color:rgba(140,36,21,.30) !important;letter-spacing:.18em !important;
}
body[data-theme="editorial"] .hero-tag .dot{background:#8C2415 !important}

body[data-theme="editorial"] .btn-grad{
  background:#1E1A14 !important;color:#FAF4E8 !important;
  border:1px solid #1E1A14 !important;box-shadow:0 8px 24px -8px rgba(30,26,20,.30) !important;
  font-family:'Instrument Serif',serif !important;font-style:italic;
  font-weight:400 !important;font-size:17px;letter-spacing:-.01em;
}
body[data-theme="editorial"] .btn-grad::before{display:none !important}
body[data-theme="editorial"] .btn-grad:hover{
  background:#8C2415 !important;border-color:#8C2415 !important;
}
body[data-theme="editorial"] .btn-ghost{
  background:transparent !important;color:#1E1A14 !important;
  border:1px solid #1E1A14 !important;
  font-family:'Instrument Serif',serif !important;font-style:italic;
}

body[data-theme="editorial"] .scroll-orb{
  background:radial-gradient(circle,rgba(140,36,21,.18),transparent 70%) !important;
}

/* ============================================================
   ╔══════════════════════════════════════════════════════════╗
   ║  THEME: OCEAN (deep navy + electric cyan-blue)           ║
   ║  Tech-luxury · Apple/Tesla energy · cool depth           ║
   ╚══════════════════════════════════════════════════════════╝
   ============================================================ */
body[data-theme="luxe"]{
  background:#051528 !important;color:#F0F4FA !important;
}
body[data-theme="luxe"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 700px at 50% 15%,rgba(45,168,224,.16),transparent 60%),
    radial-gradient(700px 600px at 85% 85%,rgba(91,224,250,.10),transparent 60%),
    #051528;
}

body[data-theme="luxe"] .nav{
  background:rgba(5,21,40,.88) !important;
  border:1px solid rgba(91,224,250,.30) !important;
  box-shadow:0 0 30px rgba(45,168,224,.18) !important;
}
body[data-theme="luxe"] .brand-mark{
  color:#F0F4FA !important;
  background:none !important;-webkit-background-clip:initial !important;
  background-clip:initial !important;-webkit-text-fill-color:#F0F4FA !important;
}
body[data-theme="luxe"] .brand-mark .brand-c,
body[data-theme="luxe"] .brand-mark::after{
  background:linear-gradient(135deg, #5BE0FA, #2DA8E0, #0D5BC8) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 8px rgba(91,224,250,.40));
}

body[data-theme="luxe"] .hero{
  background:transparent !important;color:#F0F4FA !important;
}
body[data-theme="luxe"] .hero-h1{
  color:#F8FBFF !important;
  letter-spacing:-.035em !important;
}
body[data-theme="luxe"] .hero-sub{
  color:rgba(240,244,250,.82) !important;
  max-width:60ch;margin-left:auto;margin-right:auto;
}
body[data-theme="luxe"] .ital{
  background:linear-gradient(135deg, #5BE0FA 0%, #2DA8E0 50%, #0D5BC8 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 0 10px rgba(45,168,224,.45));
}
body[data-theme="luxe"] .hero-tag{
  color:#5BE0FA !important;border-color:rgba(91,224,250,.35) !important;
  background:rgba(45,168,224,.08) !important;
}
body[data-theme="luxe"] .hero-tag .dot{background:#5BE0FA !important;box-shadow:0 0 10px #5BE0FA}

body[data-theme="luxe"] .btn-grad{
  background:linear-gradient(135deg, #2DA8E0, #0D5BC8) !important;
  color:#F8FBFF !important;
  border:none !important;
  box-shadow:0 14px 36px -8px rgba(45,168,224,.55), 0 0 0 1px rgba(91,224,250,.20) inset !important;
  font-weight:700 !important;
}
body[data-theme="luxe"] .btn-grad::before{display:none !important}
body[data-theme="luxe"] .btn-grad:hover{
  background:linear-gradient(135deg, #5BE0FA, #2DA8E0) !important;
  box-shadow:0 18px 44px -8px rgba(91,224,250,.55) !important;
}
body[data-theme="luxe"] .btn-ghost{
  background:rgba(45,168,224,.06) !important;
  color:#5BE0FA !important;
  border:1px solid rgba(91,224,250,.45) !important;
}

body[data-theme="luxe"] .scroll-orb{
  background:radial-gradient(circle, rgba(45,168,224,.45), transparent 70%) !important;
  filter:blur(90px) !important;
}
body[data-theme="luxe"] .btn-ghost{
  background:transparent !important;color:#E8DCB0 !important;
  border:1px solid rgba(232,220,176,.30) !important;
  letter-spacing:.14em !important;text-transform:uppercase;font-size:13px;
}

body[data-theme="luxe"] .scroll-orb{
  background:radial-gradient(circle,rgba(200,169,81,.25),transparent 70%) !important;
}

/* ============================================================
   MOBILE — FAB shrinks, panel goes full-width
   ============================================================ */
@media (max-width:900px){
  /* Lift FAB above the bottom-mounted chapter rail */
  .theme-fab{bottom:80px;right:14px;width:50px;height:50px}
  .theme-fab-label{display:none}
  .theme-panel{
    bottom:142px;right:14px;left:14px;width:auto;
    padding:22px 22px 18px;
  }
  .theme-panel-h{font-size:22px}
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .theme-fab-pulse{display:none}
  body.theme-switching::after{animation:none;display:none}
}