/* Teman. Väljs under Mer → Inställningar → Design (data-design på <html>).
   "Klassisk" är styles.css utan tillägg. Alla teman använder samma systemtypsnitt och följer
   inställningen ljust/mörkt. */

/* ============================================================
   SKIFFER – svalt gråblått med en dämpad petrolfärg
   ============================================================ */
:root[data-design="skiffer"] {
  --bg: #eef1f4;
  --card: #ffffff;
  --text: #1d2530;
  --muted: #687483;
  --border: #d9dfe6;
  --input: #f7f9fb;
  --primary: #2c6e72;
  --primary-text: #ffffff;
  --pb: #2e8a57;
  --pb-bg: #e2f2e8;
  --reppb: #b86b22;
  --reppb-bg: #f8ead9;
  --chip: #e9edf2;
  --grid: #e4e9ee;
  --grad-l: 38%;
  --hm0: #e4e9ee;
  --hm1: #b5d3d3;
  --hm2: #5f9fa1;
  --hm3: #2c6e72;
  --fruit-a: #2c6e72;
  --fruit-b: #275f63;
  --fruit-text: #ffffff;
  --fruit-muted: rgba(255,255,255,0.78);
  --fruit-accent: #2c6e72;
  --top: var(--bg);
  --top-text: var(--text);
  --fruit-shadow: rgba(44, 110, 114, 0.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="skiffer"]:not([data-theme="light"]) {
    --bg: #13181e;
    --card: #1b2229;
    --text: #e3e8ee;
    --muted: #8b97a5;
    --border: #2a333d;
    --input: #161c22;
    --primary: #5fb1b0;
    --primary-text: #0f1a1c;
    --pb: #5cc98a;
    --pb-bg: #18301f;
    --reppb: #e7a25c;
    --reppb-bg: #33261a;
    --chip: #222a33;
    --grid: #232b34;
    --grad-l: 64%;
    --hm0: #1f272f;
    --hm1: #21474a;
    --hm2: #3a7f80;
    --hm3: #5fb1b0;
    --fruit-a: #2b6f72;
    --fruit-b: #255f62;
    --fruit-text: #e6f4f3;
    --fruit-muted: rgba(230,244,243,0.75);
    --fruit-accent: #74c4c1;
    color-scheme: dark;
  }
}
:root[data-design="skiffer"][data-theme="dark"] {
  --bg: #13181e;
  --card: #1b2229;
  --text: #e3e8ee;
  --muted: #8b97a5;
  --border: #2a333d;
  --input: #161c22;
  --primary: #5fb1b0;
  --primary-text: #0f1a1c;
  --pb: #5cc98a;
  --pb-bg: #18301f;
  --reppb: #e7a25c;
  --reppb-bg: #33261a;
  --chip: #222a33;
  --grid: #232b34;
  --grad-l: 64%;
  --hm0: #1f272f;
  --hm1: #21474a;
  --hm2: #3a7f80;
  --hm3: #5fb1b0;
  --fruit-a: #2b6f72;
  --fruit-b: #255f62;
  --fruit-text: #e6f4f3;
  --fruit-muted: rgba(230,244,243,0.75);
  --fruit-accent: #74c4c1;
  color-scheme: dark;
}

/* ============================================================
   GRAFIT & KOPPAR – grafit med varm kopparaccent
   ============================================================ */
:root[data-design="koppar"] {
  --bg: #f1efec;
  --card: #fbfaf8;
  --text: #26221f;
  --muted: #7a716a;
  --border: #e0dbd5;
  --input: #fffdfb;
  --primary: #2b2724;
  --primary-text: #f7f1ea;
  --pb: #3f8a52;
  --pb-bg: #e3efe2;
  --reppb: #b5643a;
  --reppb-bg: #f5e4d8;
  --chip: #ece8e3;
  --grid: #e6e1db;
  --grad-l: 38%;
  --hm0: #e8e3dd;
  --hm1: #e3c2a9;
  --hm2: #c98a60;
  --hm3: #9c5430;
  --fruit-a: #2d2a27;
  --fruit-b: #262321;
  --fruit-text: #f6efe8;
  --fruit-muted: rgba(246,239,232,0.72);
  --fruit-accent: #b5643a;
  --top: var(--bg);
  --top-text: var(--text);
  --fruit-shadow: rgba(38, 35, 33, 0.3);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="koppar"]:not([data-theme="light"]) {
    --bg: #161514;
    --card: #201e1c;
    --text: #ece6df;
    --muted: #9d948b;
    --border: #33302c;
    --input: #1a1817;
    --primary: #d8895a;
    --primary-text: #1a1310;
    --pb: #78c78a;
    --pb-bg: #1e2e21;
    --reppb: #e39a62;
    --reppb-bg: #36261b;
    --chip: #292624;
    --grid: #2a2724;
    --grad-l: 64%;
    --hm0: #24211f;
    --hm1: #4f3526;
    --hm2: #9a5f3c;
    --hm3: #d8895a;
    --fruit-a: #9a5a37;
    --fruit-b: #844b2d;
    --fruit-text: #f3e9df;
    --fruit-muted: rgba(243,233,223,0.7);
    --fruit-accent: #e39a62;
    color-scheme: dark;
  }
}
:root[data-design="koppar"][data-theme="dark"] {
  --bg: #161514;
  --card: #201e1c;
  --text: #ece6df;
  --muted: #9d948b;
  --border: #33302c;
  --input: #1a1817;
  --primary: #d8895a;
  --primary-text: #1a1310;
  --pb: #78c78a;
  --pb-bg: #1e2e21;
  --reppb: #e39a62;
  --reppb-bg: #36261b;
  --chip: #292624;
  --grid: #2a2724;
  --grad-l: 64%;
  --hm0: #24211f;
  --hm1: #4f3526;
  --hm2: #9a5f3c;
  --hm3: #d8895a;
  --fruit-a: #9a5a37;
  --fruit-b: #844b2d;
  --fruit-text: #f3e9df;
  --fruit-muted: rgba(243,233,223,0.7);
  --fruit-accent: #e39a62;
  color-scheme: dark;
}

/* ============================================================
   FJORD – djupt marinblått med en mjuk korallaccent
   ============================================================ */
:root[data-design="fjord"] {
  --bg: #f2f4f8;
  --card: #ffffff;
  --text: #1a2340;
  --muted: #66708a;
  --border: #dbe0ea;
  --input: #f8f9fc;
  --primary: #2c4787;
  --primary-text: #ffffff;
  --pb: #2f8a5c;
  --pb-bg: #e1f1e8;
  --reppb: #d0644e;
  --reppb-bg: #fbe6e1;
  --chip: #eaedf4;
  --grid: #e5e9f1;
  --grad-l: 38%;
  --hm0: #e5e9f1;
  --hm1: #b9c6e6;
  --hm2: #6f86c4;
  --hm3: #2c4787;
  --fruit-a: #2c4787;
  --fruit-b: #263d75;
  --fruit-text: #ffffff;
  --fruit-muted: rgba(255,255,255,0.78);
  --fruit-accent: #d0644e;
  --top: var(--bg);
  --top-text: var(--text);
  --fruit-shadow: rgba(44, 71, 135, 0.28);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="fjord"]:not([data-theme="light"]) {
    --bg: #10152a;
    --card: #182039;
    --text: #e5e9f5;
    --muted: #8f98b6;
    --border: #28314f;
    --input: #131a30;
    --primary: #8da6e6;
    --primary-text: #10152a;
    --pb: #68cf98;
    --pb-bg: #16302a;
    --reppb: #f0907a;
    --reppb-bg: #3a2228;
    --chip: #1f2846;
    --grid: #212a47;
    --grad-l: 64%;
    --hm0: #1c2440;
    --hm1: #2c3d73;
    --hm2: #5670b8;
    --hm3: #8da6e6;
    --fruit-a: #34509a;
    --fruit-b: #2c4586;
    --fruit-text: #eef1fb;
    --fruit-muted: rgba(238,241,251,0.75);
    --fruit-accent: #f39a85;
    color-scheme: dark;
  }
}
:root[data-design="fjord"][data-theme="dark"] {
  --bg: #10152a;
  --card: #182039;
  --text: #e5e9f5;
  --muted: #8f98b6;
  --border: #28314f;
  --input: #131a30;
  --primary: #8da6e6;
  --primary-text: #10152a;
  --pb: #68cf98;
  --pb-bg: #16302a;
  --reppb: #f0907a;
  --reppb-bg: #3a2228;
  --chip: #1f2846;
  --grid: #212a47;
  --grad-l: 64%;
  --hm0: #1c2440;
  --hm1: #2c3d73;
  --hm2: #5670b8;
  --hm3: #8da6e6;
  --fruit-a: #34509a;
  --fruit-b: #2c4586;
  --fruit-text: #eef1fb;
  --fruit-muted: rgba(238,241,251,0.75);
  --fruit-accent: #f39a85;
  color-scheme: dark;
}

/* Gemensamt för Skiffer, Grafit & koppar och Fjord: lugna ytor, en accent, måttliga former */
[data-design="skiffer"] .fruit, [data-design="koppar"] .fruit, [data-design="fjord"] .fruit { border-radius: 18px; }
[data-design="skiffer"] .card, [data-design="koppar"] .card, [data-design="fjord"] .card, [data-design="skiffer"] .tile, [data-design="koppar"] .tile, [data-design="fjord"] .tile, [data-design="skiffer"] .modal, [data-design="koppar"] .modal, [data-design="fjord"] .modal { border-radius: 16px; }
[data-design="skiffer"] .fruit-details, [data-design="koppar"] .fruit-details, [data-design="fjord"] .fruit-details { background: rgba(255, 255, 255, 0.16); }
[data-design="skiffer"] .dock, [data-design="koppar"] .dock, [data-design="fjord"] .dock, [data-design="skiffer"] .nav, [data-design="koppar"] .nav, [data-design="fjord"] .nav { background: var(--bg); box-shadow: none; }
[data-design="skiffer"] .nav button.on, [data-design="koppar"] .nav button.on, [data-design="fjord"] .nav button.on { color: var(--primary); }
[data-design="skiffer"] .toast.success, [data-design="koppar"] .toast.success, [data-design="fjord"] .toast.success { background: var(--pb); }

/* ============================================================
   4. SAND – lugnt för ögonen: sand, beige och brunt, mjuka former.
   Följer inställningen ljust/mörkt (mörkt = espresso).
   ============================================================ */
:root[data-design="sand"] {
  --bg: #ece3d3;
  --card: #f4ede1;
  --text: #3b3025;
  --muted: #8b7b67;
  --border: #dccfb9;
  --input: #f8f3ea;
  --primary: #8a5d3b;
  --primary-text: #fbf6ec;
  --top: #ece3d3;
  --top-text: #3b3025;
  --pb: #5f7d4f;
  --pb-bg: #e1e6d3;
  --reppb: #a8693a;
  --reppb-bg: #f1e2cf;
  --chip: #e7dccb;
  --grid: #e0d5c2;
  --grad-l: 40%;
  --hm0: #e3d8c6; --hm1: #d2b994; --hm2: #b08458; --hm3: #7c5434;
  --fruit-a: #b9825a;
  --fruit-b: #a26c47;
  --fruit-text: #fff8ef;
  --fruit-muted: rgba(255, 248, 239, 0.8);
  --fruit-shadow: rgba(138, 93, 59, 0.28);
  --fruit-accent: #a8693a;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-design="sand"]:not([data-theme="light"]) {
    --bg: #211b15; --card: #2a231b; --text: #eadfcd; --muted: #a39279; --border: #3a3026; --input: #261f18;
    --primary: #c99a6b; --primary-text: #211b15; --top: #211b15; --top-text: #eadfcd;
    --pb: #a3bf8c; --pb-bg: #2c3324; --reppb: #dba06a; --reppb-bg: #3a2b1d; --chip: #332a21; --grid: #30281f; --grad-l: 64%;
    --hm0: #2f271f; --hm1: #5a4330; --hm2: #8f6845; --hm3: #c99a6b;
    --fruit-a: #8a6243; --fruit-b: #775338; --fruit-text: #f1e5d2; --fruit-muted: rgba(241, 229, 210, 0.72); --fruit-accent: #dba06a;
    color-scheme: dark;
  }
}
:root[data-design="sand"][data-theme="dark"] {
  --bg: #211b15; --card: #2a231b; --text: #eadfcd; --muted: #a39279; --border: #3a3026; --input: #261f18;
  --primary: #c99a6b; --primary-text: #211b15; --top: #211b15; --top-text: #eadfcd;
  --pb: #a3bf8c; --pb-bg: #2c3324; --reppb: #dba06a; --reppb-bg: #3a2b1d; --chip: #332a21; --grid: #30281f; --grad-l: 64%;
  --hm0: #2f271f; --hm1: #5a4330; --hm2: #8f6845; --hm3: #c99a6b;
  --fruit-a: #8a6243; --fruit-b: #775338; --fruit-text: #f1e5d2; --fruit-muted: rgba(241, 229, 210, 0.72); --fruit-accent: #dba06a;
  color-scheme: dark;
}
[data-design="sand"] .fruit { border-radius: 22px; }
[data-design="sand"] .card, [data-design="sand"] .tile, [data-design="sand"] .modal { border-radius: 18px; }
[data-design="sand"] .btn, [data-design="sand"] input, [data-design="sand"] select, [data-design="sand"] .set-chip,
[data-design="sand"] .set-row, [data-design="sand"] .chip, [data-design="sand"] .pass-item, [data-design="sand"] .up-btn { border-radius: 12px; }
[data-design="sand"] .ex-picker-name,
[data-design="sand"] .fruit-target,
[data-design="sand"] .card-title,
[data-design="sand"] .tile-value,
[data-design="sand"] .ls-top,
[data-design="sand"] .stepper input,
[data-design="sand"] .timer-time,
[data-design="sand"] .session-date,
[data-design="sand"] .modal-head h2 { font-weight: 600; }
[data-design="sand"] .ex-picker-name { font-size: 28px; letter-spacing: -0.01em; }
[data-design="sand"] .fruit-target { font-size: 42px; letter-spacing: -0.02em; }
[data-design="sand"] .fruit-label { opacity: 0.7; letter-spacing: 0.1em; }
[data-design="sand"] .fruit-details { background: rgba(255, 255, 255, 0.25); }
[data-design="sand"] .dock { background: var(--bg); box-shadow: none; }
[data-design="sand"] .nav { background: var(--bg); }
[data-design="sand"] .nav button.on { color: var(--primary); }
[data-design="sand"] .toast.success { background: var(--pb); }

/* Mellanläge (data-theme="dim"): dämpat mörkt, ljusare än mörkt läge */
:root[data-design="skiffer"][data-theme="dim"] {
  --bg: #262d34;
  --card: #2f3740;
  --text: #e3e8ee;
  --muted: #a0abb8;
  --border: #3e4853;
  --input: #2a3239;
  --primary: #6dbcbb;
  --primary-text: #0f1a1c;
  --pb: #63cf90;
  --pb-bg: #2b4436;
  --reppb: #eca866;
  --reppb-bg: #4a3a2a;
  --chip: #36404a;
  --grid: #38424c;
  --grad-l: 66%;
  --hm0: #333c46;
  --hm1: #2f5b5d;
  --hm2: #4a8f90;
  --hm3: #6dbcbb;
  --fruit-a: #33797c;
  --fruit-b: #2c6a6d;
  --fruit-text: #eef8f7;
  --fruit-muted: rgba(238,248,247,0.75);
  --fruit-accent: #84cfcb;
  --top: var(--bg);
  --fruit-shadow: transparent;
  color-scheme: dark;
}
:root[data-design="koppar"][data-theme="dim"] {
  --bg: #2c2926;
  --card: #36322e;
  --text: #ede6de;
  --muted: #ada399;
  --border: #47423c;
  --input: #312d2a;
  --primary: #df9465;
  --primary-text: #1d140f;
  --pb: #82cd93;
  --pb-bg: #2f4232;
  --reppb: #e9a46f;
  --reppb-bg: #4b3628;
  --chip: #3d3834;
  --grid: #3f3a35;
  --grad-l: 66%;
  --hm0: #3a3531;
  --hm1: #5e4231;
  --hm2: #a8694a;
  --hm3: #df9465;
  --fruit-a: #a8653f;
  --fruit-b: #8f5535;
  --fruit-text: #f6ece1;
  --fruit-muted: rgba(246,236,225,0.72);
  --fruit-accent: #eaa574;
  --top: var(--bg);
  --fruit-shadow: transparent;
  color-scheme: dark;
}
:root[data-design="fjord"][data-theme="dim"] {
  --bg: #232a42;
  --card: #2c3450;
  --text: #e7ebf6;
  --muted: #a2abc8;
  --border: #3c4566;
  --input: #262e48;
  --primary: #9db3ee;
  --primary-text: #141a33;
  --pb: #72d6a1;
  --pb-bg: #26443a;
  --reppb: #f39d88;
  --reppb-bg: #4d3038;
  --chip: #343d5c;
  --grid: #363f5e;
  --grad-l: 66%;
  --hm0: #313a58;
  --hm1: #3a4c86;
  --hm2: #6680c6;
  --hm3: #9db3ee;
  --fruit-a: #3d5aa8;
  --fruit-b: #344e94;
  --fruit-text: #f1f3fc;
  --fruit-muted: rgba(241,243,252,0.75);
  --fruit-accent: #f6a693;
  --top: var(--bg);
  --fruit-shadow: transparent;
  color-scheme: dark;
}
:root[data-design="sand"][data-theme="dim"] {
  --bg: #3a322a;
  --card: #443b32;
  --text: #efe5d6;
  --muted: #b8a790;
  --border: #54493d;
  --input: #3f362d;
  --primary: #d2a67a;
  --primary-text: #2a2018;
  --pb: #a9c592;
  --pb-bg: #3c4632;
  --reppb: #e2aa76;
  --reppb-bg: #54402e;
  --chip: #4a4036;
  --grid: #4c4238;
  --grad-l: 66%;
  --hm0: #483e34;
  --hm1: #6a5038;
  --hm2: #9b7350;
  --hm3: #d2a67a;
  --fruit-a: #9a6e4b;
  --fruit-b: #865e3f;
  --fruit-text: #f6ebda;
  --fruit-muted: rgba(246,235,218,0.75);
  --fruit-accent: #e2aa76;
  --top: var(--bg);
  --fruit-shadow: transparent;
  color-scheme: dark;
}