/* CHIKA Valv-sajten i Djup (2026-09-24), familjens ljusa variant.
   Kit och tokens är kopior från ~/Code/chika-journal/design/. Allt ligger
   lokalt — sidan laddar fortfarande ingenting utifrån.
   Prestanda: ingen backdrop-filter eller filter ovanpå den rörliga scenen. */
:root {
  --bg: #F2F4F1; --fg: #111A15; --mut: #4E6055; --line: #DCE3DA; --card: #fff;
  --acc: #8A6520; --acc2: #1F7A50; --mint: #F6EEDC;
  --skugga: var(--dk-skugga-1);
}
body { background: transparent !important; }

/* Toppraden: tät yta i stället för glas över scenen */
.topp { background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.märke span { background: linear-gradient(145deg, #1B2621, #0E1512); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 6px 16px -6px var(--dk-glod-mass); }
.meny a:hover { color: var(--acc); }

.hjälte::before { opacity: .45; }
h1 { letter-spacing: -.035em; }
.grad { background: linear-gradient(95deg, var(--acc) 5%, #A67C2C 45%, var(--acc2) 95%); -webkit-background-clip: text; background-clip: text; }
.etikett { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent); }

/* Knappar: taktil mässing, som i appen */
.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #A67C2C, #8A6520);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 10px 24px -8px var(--dk-glod-mass);
  transition: transform .25s var(--dk-spring), box-shadow .25s var(--dk-ease);
}
.cta:hover { background: linear-gradient(180deg, #B48A36, #93702A); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18), 0 18px 34px -10px var(--dk-glod-mass); }
.cta:active { transform: translateY(1px) scale(.98); }
.cta.tyst { background: linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta)); color: var(--fg); box-shadow: inset 0 1px 0 var(--dk-ljus), inset 0 0 0 1px var(--dk-kant), var(--dk-skugga-1); }
.cta.tyst:hover { box-shadow: inset 0 0 0 1px var(--acc), var(--dk-skugga-2); color: var(--acc); }
.meny .cta { box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px -8px var(--dk-glod-mass); }

/* Ytor på olika höjd */
.kort, .pris, .steg li, .faq details, .fönster, .flöde, .chips li, .dok, .avslutsruta {
  background: linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta));
  box-shadow: inset 0 1px 0 var(--dk-ljus), inset 0 0 0 1px var(--dk-kant), var(--dk-skugga-1);
}
.fönster, .flöde { box-shadow: inset 0 1px 0 var(--dk-ljus), inset 0 0 0 1px var(--dk-kant), var(--dk-skugga-3); }
.kort:hover, .pris:hover { transform: none; box-shadow: inset 0 1px 0 var(--dk-ljus), inset 0 0 0 1px color-mix(in srgb, var(--acc) 30%, transparent), var(--dk-skugga-3); }
.kort .ikon, .kort h3 { transform: translateZ(26px); }
.ikon { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 22px -10px rgba(0,0,0,.25); }
.pris.vald { background: linear-gradient(180deg, #fff, #FBF6EA); box-shadow: inset 0 0 0 2px var(--acc), 0 20px 50px -24px var(--dk-glod-mass), var(--dk-skugga-2); }
.pris .tal { transform: translateZ(30px); }
.vald .stämpel { background: linear-gradient(180deg, #A67C2C, #8A6520); box-shadow: 0 6px 14px -6px var(--dk-glod-mass); }
.steg li::before { background: linear-gradient(145deg, #A67C2C, #8A6520); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px -8px var(--dk-glod-mass); transform: translateZ(24px); }
.sökknapp, .nr, .frågor button[aria-pressed=true] { background: linear-gradient(180deg, #A67C2C, #8A6520); }
.frågor button { transition: transform .25s var(--dk-spring), box-shadow .2s; }
.frågor button:hover { transform: translateY(-1px); }
.faq details { transition: box-shadow .3s var(--dk-ease); }
.faq details[open] { box-shadow: inset 0 1px 0 var(--dk-ljus), inset 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent), var(--dk-skugga-2); }

/* Bandet mitt på sidan: själva valvet, grönsvart med mässing */
.bandruta {
  background: radial-gradient(60% 80% at 15% 0%, rgba(200,161,90,.28), transparent 60%),
              radial-gradient(50% 70% at 90% 100%, rgba(90,175,131,.22), transparent 60%),
              linear-gradient(160deg, #1B2621, #0E1512 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 40px 80px -40px rgba(14,21,18,.6);
}
.bandruta h2 { background: linear-gradient(180deg, #fff 30%, #D9B672); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nätsvar { box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); }

.avslutsruta { background: radial-gradient(50% 80% at 20% 20%, var(--mint), transparent), radial-gradient(50% 80% at 85% 80%, #E1F1E8, transparent), linear-gradient(180deg, var(--dk-yta-hog), var(--dk-yta)); }
.film video { box-shadow: 0 40px 80px -30px rgba(14,21,18,.45), 0 0 0 1px var(--dk-kant); }
:focus-visible { outline-color: var(--acc); }