/* ===== CryptoVault – Globalt temasystem ===== */

/* Default-värden (innan JS hinner sätta data-theme) */
:root {
  --cv-bg: #020617;
  --cv-text: #e5e7eb;
  --cv-card-bg: #020617;
  --cv-border: #1e293b;
  --cv-muted: #9ca3af;
  --cv-link: #22c55e;
  --cv-link-hover: #4ade80;
  --cv-input-bg: #020617;
  --cv-input-border: #1f2933;
  --cv-input-text: #e5e7eb;
  color-scheme: dark;
}

/* ===== Mörkt tema (CryptoVault) ===== */
:root[data-theme="cryptovault"] {
  --cv-bg: #020617;        /* bg-slate-950 */
  --cv-text: #e5e7eb;      /* text-slate-100 */
  --cv-card-bg: #020617;
  --cv-border: #1e293b;
  --cv-muted: #9ca3af;
  --cv-link: #22c55e;
  --cv-link-hover: #4ade80;
  --cv-input-bg: #020617;
  --cv-input-border: #1f2933;
  --cv-input-text: #e5e7eb;
  color-scheme: dark;
}

/* ===== Ljust tema – varm, mjuk, “fotografvänlig” ===== */
:root[data-theme="light"] {
  --cv-bg: #F4F3F1;
  --cv-text: #111827;

  --cv-card-bg: #FFFFFF;
  --cv-border: #D8D5D0;

  --cv-muted: #4B5563;

  --cv-link: #15803D;
  --cv-link-hover: #166534;

  --cv-input-bg: #FFFFFF;
  --cv-input-border: #D8D5D0;
  --cv-input-text: #111827;

  color-scheme: light;
}

/* ===== Baslayout ===== */

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--cv-bg);
  color: var(--cv-text);
}

/* Länkar globalt */
a {
  color: var(--cv-link);
}
a:hover {
  color: var(--cv-link-hover);
}

/* Kort / sektioner som ska följa tema */
.cv-card {
  background-color: var(--cv-card-bg);
  border: 1px solid var(--cv-border);
}

/* Navbar / paneler som följer tema */
.cv-nav {
  background-color: var(--cv-card-bg);
  border-bottom: 1px solid var(--cv-border);
  color: var(--cv-text);
}

.cv-nav a {
  color: var(--cv-text);
  text-decoration: underline;
}
.cv-nav a:hover {
  opacity: 0.8;
}

/* Knapp i nav / tema-knapp */
.cv-btn-outline {
  border: 1px solid var(--cv-border);
  background: transparent;
  color: var(--cv-text);
  border-radius: 9999px;
}
.cv-btn-outline:hover {
  background-color: rgba(148, 163, 184, 0.15);
}

/* Mobilmeny-knapp ska också följa temat */
.cv-nav-btn {
  color: var(--cv-text);
}

/* Diskret text */
.cv-muted {
  color: var(--cv-muted);
}

/* Inputs som ska följa tema (om du använder cv-input-klassen) */
.cv-input {
  background-color: var(--cv-input-bg);
  color: var(--cv-input-text);
  border: 1px solid var(--cv-input-border);
}

/* ===== Tailwind textklasser i ljust tema ===== */

/* All “ljus” slate-text ska bli mörk i ljust tema */
:root[data-theme="light"] .text-slate-50,
:root[data-theme="light"] .text-slate-100,
:root[data-theme="light"] .text-slate-200,
:root[data-theme="light"] .text-slate-300 {
  color: var(--cv-text) !important;
}

/* Sekundär text */
:root[data-theme="light"] .text-slate-400 {
  color: #4B5563 !important;
}

/* Lite mörkare för 600 */
:root[data-theme="light"] .text-slate-600 {
  color: #374151 !important;
}

/* Grön text – gör den mörkare i ljust läge */
:root[data-theme="light"] .text-emerald-100,
:root[data-theme="light"] .text-emerald-200,
:root[data-theme="light"] .text-emerald-300 {
  color: #064E3B !important;
}

/* ===== Bakgrunder / kort i ljust tema ===== */

/* Mörka kort → ljusa kort i light */
:root[data-theme="light"] .bg-slate-900\/60,
:root[data-theme="light"] .bg-slate-900\/50,
:root[data-theme="light"] .bg-slate-900\/40,
:root[data-theme="light"] .bg-slate-800\/60,
:root[data-theme="light"] .bg-slate-800\/50,
:root[data-theme="light"] .bg-slate-950\/60,
:root[data-theme="light"] .bg-slate-950\/40 {
  background-color: var(--cv-card-bg) !important;
}

/* Helt svarta bakgrunder på inputs / kort → vita i light */
:root[data-theme="light"] .bg-slate-950 {
  background-color: #FFFFFF !important;
}

/* Mörka borders → ljusa i light */
:root[data-theme="light"] .border-slate-700,
:root[data-theme="light"] .border-slate-800,
:root[data-theme="light"] .border-slate-900 {
  border-color: var(--cv-border) !important;
}

/* Inputs – textfärg i light */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea {
  color: var(--cv-input-text);
}

/* ===== FAQ-rutor (details.group) ===== */

:root[data-theme="light"] details.group {
  background-color: #FFFFFF;
  border-color: #D8D5D0;
}
:root[data-theme="light"] details.group[open] {
  background-color: #F7F5F2;
}

/* ===== Period-knappar (3/12 månader) ===== */

:root[data-theme="light"] .bg-emerald-900\/40 {
  background-color: #BFE3CF !important; /* mjuk pastellgrön */
  color: #064E3B !important;            /* mörkgrön text */
  border-color: #22C55E !important;
}

/* Filosofi-boxen (“inga falska löften”) i ljust tema */
:root[data-theme="light"] .bg-emerald-900\/10 {
  background-color: #DDEFE5 !important;
  border-color: #A7D8BF !important;
}

/* ===== Chips/taggar (Produkter / Fotografer etc.) ===== */

:root[data-theme="light"] .bg-slate-700,
:root[data-theme="light"] .bg-slate-800,
:root[data-theme="light"] .bg-slate-900,
:root[data-theme="light"] .bg-slate-700\/80,
:root[data-theme="light"] .bg-slate-800\/80,
:root[data-theme="light"] .bg-slate-900\/80,
:root[data-theme="light"] .bg-slate-900\/70 {
  background-color: #E9E7E3 !important;
  color: #111827 !important;
  border-color: #D8D5D0 !important;
}

/* Gröna chip (t.ex. “RAW, TIFF, PSD & 4K”) */
:root[data-theme="light"] .bg-emerald-900\/20 {
  background-color: #DCFCE7 !important;
  color: #14532D !important;
}

/* ===== Fotograf Pro – gradient i ljust tema ===== */

:root[data-theme="light"] .bg-gradient-to-br.from-slate-900\/80.via-slate-900\/70.to-emerald-950\/40 {
  background: linear-gradient(135deg, #F9FAFB, #E5E7EB) !important;
  border-color: #86EFAC !important;
}

/* ===== Security-status (säkerhetsöversikten) ===== */

/* Yttre ramen */
:root[data-theme="light"] .cv-card.border-emerald-700\/60.bg-emerald-900\/20 {
  background-color: var(--cv-card-bg) !important;
  border-color: #16A34A !important;
}

/* Inre små kort */
:root[data-theme="light"] .border-emerald-700\/40.bg-slate-950\/40 {
  background-color: #FFFFFF !important;
  border-color: #86EFAC !important;
}

/* ===== Mobilmeny-animation för CryptoVault Cloud ===== */

#cv-mobile-menu {
  transition:
    max-height 0.22s ease-out,
    opacity 0.18s ease-out,
    transform 0.22s ease-out;
  transform-origin: top;
}

#cv-mobile-menu.mobile-closed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: scaleY(0.95);
}

/* Öppen meny – nästan full höjd + scroll om det behövs */
#cv-mobile-menu.mobile-open {
  max-height: 90vh;   /* större än tidigare 400px */
  opacity: 1;
  transform: scaleY(1);
  overflow-y: auto;    /* gör att man kan scrolla om listan blir lång */
}

/* ===== Trust ribbon – alltid mörk, oberoende av tema ===== */

.cv-trust-ribbon {
  background-color: #052e1a !important;
  border-bottom: 1px solid #064e3b !important;
  color: #d1fae5 !important;
}

.cv-trust-ribbon a {
  color: #a7f3d0 !important;
  text-decoration: none;
}

.cv-trust-ribbon a:hover {
  opacity: 0.85;
}

.cv-trust-ribbon .dot {
  color: #34d399 !important;
}