/* ============================================================
   Djup för CHIKA AB-familjen (AB, Streaming, Finance Academy).
   Samma tokens som journalens djup.css: mässing mot grönsvart,
   scen med ljus som driver, ytor på olika höjd.
   Mörkt är förval; ljust läge är :root[data-theme="light"].
   ============================================================ */
:root {
  --dk-bas: #0A100D;
  --dk-a: rgba(200, 161, 90, .28);
  --dk-b: rgba(90, 175, 131, .19);
  --dk-c: rgba(80, 130, 150, .17);
  --dk-golv: rgba(217, 182, 114, .12);
  --dk-korn: .05;
  --dk-vinjett: rgba(0, 0, 0, .55);
  --dk-yta: rgba(20, 30, 25, .62);
  --dk-yta-hog: rgba(30, 43, 36, .80);
  --dk-kant: rgba(233, 239, 234, .07);
  --dk-ljus: rgba(255, 255, 255, .07);
  --dk-reflex: rgba(217, 182, 114, .13);
  --dk-mass: #D9B672;
  --dk-gron: #5AAF83;
  --dk-rod: #C4614A;
  --dk-glod-mass: rgba(217, 182, 114, .30);
  --dk-glod-gron: rgba(90, 175, 131, .26);
  --dk-glod-rod: rgba(196, 97, 74, .24);
  --dk-skugga-1: 0 1px 1px rgba(0,0,0,.30), 0 4px 10px -2px rgba(0,0,0,.35), 0 14px 28px -14px rgba(0,0,0,.70);
  --dk-skugga-2: 0 2px 3px rgba(0,0,0,.35), 0 12px 24px -8px rgba(0,0,0,.55), 0 40px 70px -30px rgba(0,0,0,.90);
  --dk-skugga-3: 0 4px 8px rgba(0,0,0,.40), 0 30px 60px -16px rgba(0,0,0,.70), 0 80px 120px -50px rgba(0,0,0,.95);
}
:root[data-theme="light"] {
  --dk-bas: #EEF1EC;
  --dk-a: rgba(200, 161, 90, .38);
  --dk-b: rgba(90, 175, 131, .26);
  --dk-c: rgba(127, 164, 174, .28);
  --dk-golv: rgba(138, 101, 32, .12);
  --dk-korn: .035;
  --dk-vinjett: rgba(0, 0, 0, .08);
  --dk-yta: rgba(255, 255, 255, .70);
  --dk-yta-hog: rgba(255, 255, 255, .88);
  --dk-kant: rgba(17, 26, 21, .08);
  --dk-ljus: rgba(255, 255, 255, .95);
  --dk-reflex: rgba(255, 255, 255, .55);
  --dk-mass: #A67C2C;
  --dk-gron: #1F7A50;
  --dk-rod: #B0402A;
  --dk-glod-mass: rgba(166, 124, 44, .30);
  --dk-glod-gron: rgba(31, 122, 80, .22);
  --dk-glod-rod: rgba(176, 64, 42, .20);
  --dk-skugga-1: 0 1px 1px rgba(17,26,21,.04), 0 2px 4px rgba(17,26,21,.04), 0 8px 18px -8px rgba(17,26,21,.14);
  --dk-skugga-2: 0 2px 2px rgba(17,26,21,.04), 0 8px 16px -6px rgba(17,26,21,.10), 0 28px 48px -22px rgba(17,26,21,.30);
  --dk-skugga-3: 0 4px 6px rgba(17,26,21,.05), 0 22px 40px -12px rgba(17,26,21,.20), 0 60px 90px -40px rgba(17,26,21,.40);
}
html { background: var(--dk-bas); }
body { background: transparent !important; }

/* Gemensamma drag som alla familjens appar delar */
.dk-knapp {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--dk-mass), color-mix(in srgb, var(--dk-mass) 78%, #000)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.18), 0 8px 20px -8px var(--dk-glod-mass);
  transition: transform .25s var(--dk-spring), box-shadow .25s var(--dk-ease), filter .2s;
}
.dk-knapp:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 0 rgba(0,0,0,.18), 0 16px 30px -10px var(--dk-glod-mass); }
.dk-knapp:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
.dk-rubrik {
  background: linear-gradient(180deg, currentColor 30%, color-mix(in srgb, currentColor 62%, var(--dk-mass)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
#djup-toggle {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; width: 100%;
  color: inherit; opacity: .75; background: transparent; cursor: pointer; font-family: inherit; text-align: left;
  border: 1px solid var(--dk-kant); border-radius: 9px;
}
#djup-toggle:hover { opacity: 1; }
#djup-toggle[data-kort="true"] { width: 30px; height: 30px; padding: 0; justify-content: center; font-size: 11px; flex: none; }