/* SiteSpinner colour themes.
 *
 * Every page's tailwind.config maps its brand colours (paper, ink, card, accent, ...) to the
 * --c-* variables below, so a single class switches the whole page:
 *   (default)      cream - the app itself (wizard, editor, dashboard)
 *   .theme-loom    golden black - marketing pages, and index.html's landing view
 *   .theme-cream   resets to cream inside a dark page - for mockups of real customer sites,
 *                  which must keep their own look
 * Values are space-separated RGB channels so Tailwind's opacity modifiers (bg-card/50) work.
 */
:root, .theme-cream {
    --c-paper: 251 239 226;
    --c-ink: 43 27 20;
    --c-ink-soft: 107 82 64;
    --c-accent: 178 58 72;
    --c-accent-ink: 253 243 233;
    --c-card: 255 248 239;
    --c-card-border: 232 211 186;
    --c-gold: 200 154 78;
    --c-fern: 63 107 92;
    --c-warn: 138 74 18;
    --c-warn-bg: 245 227 196;
}
.theme-cream { color: rgb(var(--c-ink)); }

.theme-loom {
    --c-paper: 30 22 17;
    --c-ink: 246 234 217;
    --c-ink-soft: 205 187 164;
    /* Maroon text on near-black reads at ~2.6:1, so the dark theme's accent is gold;
       maroon stays in the woven threads */
    --c-accent: 214 170 92;
    --c-accent-ink: 34 22 13;
    --c-card: 35 26 19;
    --c-card-border: 74 56 38;
    --c-gold: 214 170 92;
    --c-fern: 120 168 148;
    --c-warn: 240 190 120;
    --c-warn-bg: 58 40 22;
}

/* One long espresso gradient for the whole page, with gold glows down its length so long
   pages don't read as a flat black slab */
body.theme-loom {
    background-color: #16110e;
    background-image:
        radial-gradient(900px 620px at 88% 16%, rgba(200,154,78,.10), transparent 70%),
        radial-gradient(800px 600px at 6% 38%, rgba(178,58,72,.08), transparent 70%),
        radial-gradient(1000px 700px at 80% 60%, rgba(200,154,78,.08), transparent 70%),
        radial-gradient(800px 600px at 12% 84%, rgba(200,154,78,.07), transparent 70%),
        linear-gradient(180deg, #16110e 0%, #1c1510 35%, #1a130f 70%, #130e0b 100%);
}
/* Form fields without their own background would stay browser-white with ivory text;
   :where() keeps this at zero specificity so any Tailwind bg-* on a field still wins */
:where(.theme-loom) :where(input:not([type=checkbox]):not([type=radio]), textarea, select) {
    background-color: rgb(var(--c-card));
    color: rgb(var(--c-ink));
}
:where(.theme-loom) :where(input, textarea)::placeholder { color: rgb(var(--c-ink-soft) / .7); }
/* Cards pick up a faint gold edge-light, like the hero's slideshow frame */
.theme-loom .bg-card { box-shadow: inset 0 1px 0 rgba(232,194,122,.06); }

/* ---- Header and footer: the same dark band, top and bottom of every themed page ---- */
.theme-loom > header {
    background: #16110e;
    border-color: rgba(232,194,122,.14);
}
.theme-loom > header a:hover, .theme-loom > header button:hover { color: #e8c27a; }

.theme-loom > footer {
    position: relative;
    max-width: none; width: 100%;
    margin-top: 2rem;
    padding: 3.25rem max(1rem, calc(50% - 36rem)) 2rem;
    background:
        radial-gradient(700px 300px at 15% 0%, rgba(200,154,78,.10), transparent 70%),
        #120d0a;
    border-top: 1px solid rgba(232,194,122,.14);
}
/* A strip of woven fabric along the footer's top edge - the same weave the hero ends on */
.theme-loom > footer::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 15px; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(232,194,122,.85) 0 8px, transparent 8px 12px) 0 2px / 100% 3px no-repeat,
        repeating-linear-gradient(90deg, rgba(178,58,72,.8) 0 8px, transparent 8px 12px) 6px 6px / 100% 3px no-repeat,
        repeating-linear-gradient(90deg, rgba(200,154,78,.75) 0 8px, transparent 8px 12px) 0 10px / 100% 3px no-repeat,
        repeating-linear-gradient(90deg, rgba(232,194,122,.14) 0 1px, transparent 1px 12px);
}
.theme-loom > footer a { text-decoration-color: rgba(232,194,122,.35); }
.theme-loom > footer a:hover { color: #e8c27a; }

/* ---- "The Loom" hero band (index.html), animated by assets/hero-loom.js ---- */
.loom-hero {
    position: relative; isolation: isolate; overflow: hidden;
    width: 100vw; margin-left: calc(50% - 50vw); margin-top: -2rem; margin-bottom: 3.5rem;
    color: #f6ead9;
    background:
        radial-gradient(45% 60% at 74% 42%, rgba(200,154,78,.22), transparent 70%),
        radial-gradient(40% 50% at 8% 95%, rgba(178,58,72,.22), transparent 70%),
        radial-gradient(30% 40% at 30% 10%, rgba(200,154,78,.08), transparent 70%),
        linear-gradient(180deg, #16110e 0%, #21170f 100%);
}
/* faint woven texture - warp and weft hairlines, no image download */
.loom-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2; opacity: .5; pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(232,194,122,.035) 0 1px, transparent 1px 7px),
        repeating-linear-gradient(0deg, rgba(232,194,122,.03) 0 1px, transparent 1px 7px);
    -webkit-mask-image: radial-gradient(80% 90% at 60% 40%, #000, transparent);
    mask-image: radial-gradient(80% 90% at 60% 40%, #000, transparent);
}
/* the band melts into the page gradient instead of ending on a hard line */
.loom-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1;
    background: linear-gradient(90deg, transparent, rgba(232,194,122,.35), transparent);
}
.loom-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.loom-hero-grid {
    max-width: 72rem; margin: 0 auto; padding: 3.5rem 1rem 9rem;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.75rem; align-items: center;
}
@media (min-width: 1024px) {
    .loom-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); padding: 4.5rem 1.5rem 10.5rem; gap: 3.5rem; }
}
.loom-copy { text-align: center; }
@media (min-width: 1024px) { .loom-copy { text-align: left; } }
.loom-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: #e8c27a; padding: .45rem .9rem;
    border: 1px solid rgba(232,194,122,.28); border-radius: 9999px; background: rgba(200,154,78,.08);
}
@media (max-width: 520px) { .loom-eyebrow { font-size: .65rem; letter-spacing: .1em; } }
.loom-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #e8c27a; box-shadow: 0 0 10px #e8c27a; animation: loom-blink 2.4s ease-in-out infinite; }
.loom-gold-text {
    font-style: italic; color: transparent; -webkit-background-clip: text; background-clip: text;
    background-image: linear-gradient(100deg, transparent 35%, rgba(255,246,225,.85) 50%, transparent 65%), linear-gradient(180deg, #e8c27a, #c89a4e 70%);
    background-size: 250% 100%, 100% 100%; background-repeat: no-repeat;
    animation: loom-shimmer 6s ease-in-out 1.5s infinite;
}
.loom-btn-gold {
    position: relative; overflow: hidden; background: linear-gradient(180deg, #e8c27a, #c89a4e); color: #22160d;
    box-shadow: 0 10px 28px -10px rgba(232,194,122,.6);
}
.loom-btn-gold::after {
    content: ""; position: absolute; inset: 0; transform: translateX(-120%);
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
    animation: loom-sweep 4s ease-in-out 2.5s infinite;
}
.loom-tiers b { color: #e8c27a; font-weight: 600; font-family: Fraunces, Georgia, serif; font-size: .9rem; margin-right: .25rem; }
/* header width matches the hero grid so the logo lines up with the headline */
.theme-loom > header.loom-wide > div { max-width: 72rem; }
@media (min-width: 1024px) { .theme-loom > header.loom-wide > div { padding-left: 1.5rem; padding-right: 1.5rem; } }

@keyframes loom-shimmer { 0% { background-position: 150% 0, 0 0; } 55%, 100% { background-position: -60% 0, 0 0; } }
@keyframes loom-sweep { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
@keyframes loom-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
    .loom-gold-text, .loom-btn-gold::after, .loom-eyebrow i { animation: none; }
}