/* themes.css — 4 skins for Ewwe CRM demo.
   Each block defines the FULL variable contract. Values extracted 1:1
   from the matching single-screen mockup (rave/maszyna/dzien/swit.html).
   app.css reads ONLY these variables; switching data-skin recolors all. */

/* ===================== RAVE '83 ===================== */
/* dark neon-glass · Anton + Space Mono · bg #0a0814 · violet/cyan/magenta/lime */
[data-skin="rave"]{
  --bg:#0a0814;
  --bg-image:
    radial-gradient(46vw 46vw at -10% -8%, rgba(139,108,255,.46), transparent 62%),
    radial-gradient(40vw 40vw at 108% -6%, rgba(34,211,238,.46), transparent 62%),
    radial-gradient(42vw 42vw at 106% 48%, rgba(255,79,216,.30), transparent 62%),
    radial-gradient(34vw 34vw at 0% 70%, rgba(155,240,67,.22), transparent 60%),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  --ink:#f4f1fb;
  --muted:#a89fc4;
  --faint:#a89fc4;
  --panel:rgba(20,17,36,.74);
  --panel-blur:14px;
  --solid:#140f24;
  --line:rgba(255,255,255,.11);
  --line2:rgba(255,255,255,.18);
  --radius:15px;
  --radius-sm:9px;
  --radius-pill:999px;
  --font-display:"Anton", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#8b6cff;   /* violet */
  --acc2:#22d3ee;   /* cyan   */
  --acc3:#ff4fd8;   /* magenta*/
  --acc4:#9bf043;   /* lime   */
  --ok:#46e3a0;
  --warn:#ffb020;
  --due:#ff5d73;
  --ksef:#22d3ee;
  --shadow:0 22px 56px rgba(0,0,0,.42);
  --nav-active-bg:linear-gradient(90deg, rgba(139,108,255,.26), transparent);
  --nav-active-fg:#ffffff;
  --nav-active-mark:inset 2px 0 0 var(--acc1);
}

/* ===================== MASZYNA ===================== */
/* brutalist/terminal · Archivo Black + IBM Plex Mono · bg #070707 + scanlines · acid #ccff00 · square */
[data-skin="maszyna"]{
  --bg:#070707;
  --bg-image:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  --ink:#e8e8e0;
  --muted:#7a7a72;
  --faint:#7a7a72;
  --panel:#0d0d0d;
  --panel-blur:0px;
  --solid:#0d0d0d;
  --line:#1d1d1d;
  --line2:#2a2a2a;
  --radius:0;
  --radius-sm:0;
  --radius-pill:0;
  --font-display:"Archivo Black", system-ui, sans-serif;
  --font-body:"IBM Plex Mono", monospace;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#19f0ff;   /* cyan  */
  --acc2:#ccff00;   /* acid  */
  --acc3:#ff2d8b;   /* mag   */
  --acc4:#3bff8f;   /* green */
  --ok:#3bff8f;
  --warn:#ffae00;
  --due:#ff3b30;
  --ksef:#19f0ff;
  --shadow:none;
  --nav-active-bg:#141414;
  --nav-active-fg:#ccff00;
  --nav-active-mark:inset 3px 0 0 var(--acc2);
}

/* ===================== DZIEŃ ===================== */
/* warm light · Fraunces + Hanken Grotesk · bg #f4f1e9 · cobalt #2540ec */
[data-skin="dzien"]{
  --bg:#f4f1e9;
  --bg-image:none;
  --ink:#1c1812;
  --muted:#6b6354;
  --faint:#9a9183;
  --panel:#fffdf8;
  --panel-blur:0px;
  --solid:#fffdf8;
  --line:#e7e1d3;
  --line2:#ddd5c4;
  --radius:20px;
  --radius-sm:11px;
  --radius-pill:999px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#2540ec;   /* cobalt */
  --acc2:#0c7a5e;   /* green  */
  --acc3:#e08a00;   /* amber  */
  --acc4:#a23bd2;   /* purple */
  --ok:#0c7a5e;
  --warn:#e08a00;
  --due:#d23b2f;
  --ksef:#2540ec;
  --shadow:0 2px 0 rgba(28,24,18,.02);
  --nav-active-bg:var(--acc1);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 6px 16px rgba(37,64,236,.28);
}

/* ===================== ŚWIT ===================== */
/* cool glassy light · Bricolage Grotesque + Outfit · mint/sky/lavender bg · emerald #0aa37c + indigo #5b6cff */
[data-skin="swit"]{
  --bg:#e9f3f0;
  --bg-image:
    radial-gradient(60% 50% at 8% 0%, #d7efff 0, transparent 55%),
    radial-gradient(55% 55% at 100% 10%, #d9f7ea 0, transparent 55%),
    radial-gradient(70% 60% at 70% 100%, #efe7ff 0, transparent 55%);
  --ink:#15302a;
  --muted:#5c7269;
  --faint:#90a59c;
  --panel:rgba(255,255,255,.72);
  --panel-blur:16px;
  --solid:#ffffff;
  --line:rgba(21,48,42,.1);
  --line2:rgba(21,48,42,.16);
  --radius:22px;
  --radius-sm:13px;
  --radius-pill:999px;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Outfit", system-ui, sans-serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#0aa37c;   /* emerald */
  --acc2:#5b6cff;   /* indigo  */
  --acc3:#f59e0b;   /* amber   */
  --acc4:#c14fd6;   /* purple  */
  --ok:#0aa37c;
  --warn:#f59e0b;
  --due:#f0436b;
  --ksef:#5b6cff;
  --shadow:0 10px 34px rgba(21,48,42,.07);
  --nav-active-bg:linear-gradient(120deg, var(--acc1), #0bbf8f);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 8px 18px rgba(10,163,124,.32);
}

/* ===================== KANCELARIA (law · default) ===================== */
/* prestige dark · Fraunces + Spectral · navy #0f141d · antique gold #b08d3f */
[data-skin="kancelaria"]{
  --bg:#0f141d;
  --bg-image:
    radial-gradient(120% 90% at 8% 0%, rgba(176,141,63,.12), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(35,47,67,.55), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  --ink:#ece6d8;
  --muted:#9aa3b2;
  --faint:#6b7585;
  --panel:rgba(26,35,50,.74);
  --panel-blur:12px;
  --solid:#1a2332;
  --line:rgba(176,141,63,.18);
  --line2:rgba(176,141,63,.30);
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:8px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#b08d3f;   /* antique gold */
  --acc2:#cdab63;   /* gold soft    */
  --acc3:#4a8c86;   /* muted teal   */
  --acc4:#9e3b34;   /* oxblood      */
  --ok:#5b9e6f;
  --warn:#c89a3c;
  --due:#b5524a;
  --ksef:#4a8c86;
  --shadow:0 22px 56px rgba(0,0,0,.45);
  --nav-active-bg:linear-gradient(90deg, rgba(176,141,63,.22), transparent);
  --nav-active-fg:#f4eede;
  --nav-active-mark:inset 2px 0 0 var(--acc1);
}

/* ===================== KLASYCZNA (law · warm light serif) ===================== */
[data-skin="klasyczna"]{
  --bg:#f4f1e9;
  --bg-image:none;
  --ink:#1c1812;
  --muted:#6b6354;
  --faint:#9a9183;
  --panel:#fffdf8;
  --panel-blur:0px;
  --solid:#fffdf8;
  --line:#e3dccb;
  --line2:#d8cfba;
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Spectral", Georgia, serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#7c2d2d;   /* oxblood */
  --acc2:#1f3a6b;   /* navy    */
  --acc3:#9e7b2e;   /* gold    */
  --acc4:#4a6b4a;   /* green   */
  --ok:#2f6b4a;
  --warn:#b5832a;
  --due:#a3302a;
  --ksef:#1f3a6b;
  --shadow:0 2px 0 rgba(28,24,18,.03);
  --nav-active-bg:var(--acc1);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 6px 16px rgba(124,45,45,.24);
}

/* ===================== NOWOCZESNA (law · cool clean light sans) ===================== */
[data-skin="nowoczesna"]{
  --bg:#eef1f4;
  --bg-image:radial-gradient(60% 50% at 8% 0%, #e3ecf2 0, transparent 55%),radial-gradient(55% 55% at 100% 8%, #e7eef0 0, transparent 55%);
  --ink:#1b2330;
  --muted:#5d6b7d;
  --faint:#9aa6b4;
  --panel:rgba(255,255,255,.84);
  --panel-blur:14px;
  --solid:#ffffff;
  --line:rgba(27,35,48,.10);
  --line2:rgba(27,35,48,.16);
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#2f6f8f;   /* slate teal   */
  --acc2:#3a7d6e;   /* teal green   */
  --acc3:#5b6b8c;   /* slate indigo */
  --acc4:#8a6d3f;   /* bronze       */
  --ok:#2f7d5e;
  --warn:#c08a2e;
  --due:#c0524a;
  --ksef:#2f6f8f;
  --shadow:0 10px 30px rgba(27,35,48,.08);
  --nav-active-bg:linear-gradient(120deg, var(--acc1), #357f8f);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 8px 18px rgba(47,111,143,.28);
}

/* ===================== SPEDYCJA (logistyka · deep navy control-room TMS) ===================== */
/* default for logistyka: bg #0e1722 dark navy · signal-blue primary · amber/green/red accents · Outfit + IBM Plex Mono */
[data-skin="spedycja"]{
  --bg:#0e1722;
  --bg-image:
    radial-gradient(80% 60% at 0% 0%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(60% 50% at 100% 100%, rgba(14,23,34,.9), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 4px);
  --ink:#e8edf4;
  --muted:#7a90a8;
  --faint:#4e6278;
  --panel:#141f2e;
  --panel-blur:0px;
  --solid:#141f2e;
  --line:rgba(59,130,246,.16);
  --line2:rgba(59,130,246,.26);
  --radius:10px;
  --radius-sm:6px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#3b82f6;   /* signal-blue — primary */
  --acc2:#f59e0b;   /* amber — myto/uwaga  */
  --acc3:#16a34a;   /* green — dostarczone */
  --acc4:#ef4444;   /* red — opóźnienia   */
  --ok:#16a34a;
  --warn:#f59e0b;
  --due:#ef4444;
  --ksef:#3b82f6;
  --shadow:0 16px 40px rgba(0,0,0,.5);
  --nav-active-bg:linear-gradient(90deg, rgba(59,130,246,.22), transparent);
  --nav-active-fg:#e8edf4;
  --nav-active-mark:inset 2px 0 0 var(--acc1);
}

/* ===================== POLOWY (serwis · utilitarian light slate + safety-amber) ===================== */
/* default for serwis: bg #f3f5f7 cool light · safety-amber/orange primary · squared radius · Outfit */
[data-skin="polowy"]{
  --bg:#f3f5f7;
  --bg-image:none;
  --ink:#1a2230;
  --muted:#5a6a7e;
  --faint:#8a97a8;
  --panel:#ffffff;
  --panel-blur:0px;
  --solid:#ffffff;
  --line:#d6dde6;
  --line2:#c4cdd8;
  --radius:8px;
  --radius-sm:5px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#ea7317;   /* safety-amber/orange — primary */
  --acc2:#2563eb;   /* blue — secondary             */
  --acc3:#15803d;   /* green — done/OK              */
  --acc4:#dc2626;   /* red — awaria                 */
  --ok:#15803d;
  --warn:#ea7317;
  --due:#dc2626;
  --ksef:#2563eb;
  --shadow:0 2px 8px rgba(26,34,48,.08);
  --nav-active-bg:var(--acc1);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 6px 16px rgba(234,115,23,.28);
}

/* ===================== SWIEZE (catering · warm cream light + fresh-green) ===================== */
/* default for catering: bg #f7f4ec warm cream · leaf-green primary · generous radius · Hanken Grotesk */
[data-skin="swieze"]{
  --bg:#f7f4ec;
  --bg-image:none;
  --ink:#26201a;
  --muted:#7a6e62;
  --faint:#a8a09a;
  --panel:#fffdf8;
  --panel-blur:0px;
  --solid:#fffdf8;
  --line:#e8e0d0;
  --line2:#dcd4c0;
  --radius:18px;
  --radius-sm:11px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#3f9142;   /* fresh leaf-green — primary  */
  --acc2:#e2563b;   /* tomato/coral — secondary    */
  --acc3:#d69e2e;   /* honey-amber                 */
  --acc4:#a83279;   /* berry                       */
  --ok:#3f9142;
  --warn:#d69e2e;
  --due:#e2563b;
  --ksef:#3f9142;
  --shadow:0 2px 0 rgba(38,32,26,.03);
  --nav-active-bg:var(--acc1);
  --nav-active-fg:#ffffff;
  --nav-active-mark:0 6px 16px rgba(63,145,66,.26);
}

/* ===================== BUTIK (horeca · ivory/charcoal with brass + bottle-green) ===================== */
/* default for horeca: bg #f5f1e8 ivory · brass/gold primary · bottle-green secondary · Fraunces serif display */
[data-skin="butik"]{
  --bg:#f5f1e8;
  --bg-image:
    radial-gradient(80% 60% at 8% 0%, rgba(176,138,62,.08), transparent 55%),
    radial-gradient(70% 50% at 100% 100%, rgba(47,93,80,.07), transparent 55%);
  --ink:#22201b;
  --muted:#7a7060;
  --faint:#a89e8e;
  --panel:#fffdf9;
  --panel-blur:0px;
  --solid:#fffdf9;
  --line:#e5dec8;
  --line2:#d9d0b8;
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"Space Mono", monospace;
  --acc1:#b08a3e;   /* brass/gold — primary    */
  --acc2:#2f5d50;   /* bottle-green — secondary */
  --acc3:#b5532e;   /* terracotta              */
  --acc4:#6b3a5e;   /* deep-plum               */
  --ok:#2f5d50;
  --warn:#b08a3e;
  --due:#b5532e;
  --ksef:#2f5d50;
  --shadow:0 4px 16px rgba(34,32,27,.07);
  --nav-active-bg:linear-gradient(120deg, rgba(176,138,62,.18), transparent);
  --nav-active-fg:#22201b;
  --nav-active-mark:inset 2px 0 0 var(--acc1);
}

/* ===================== GRAFIT (law · dignified dark charcoal + brass) ===================== */
[data-skin="grafit"]{
  --bg:#16181c;
  --bg-image:repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.012) 3px 4px);
  --ink:#e6e4df;
  --muted:#9a9890;
  --faint:#6e6c66;
  --panel:#1d2025;
  --panel-blur:0px;
  --solid:#1d2025;
  --line:rgba(192,160,98,.16);
  --line2:rgba(192,160,98,.26);
  --radius:8px;
  --radius-sm:5px;
  --radius-pill:6px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#c0a062;   /* brass  */
  --acc2:#7fa6a0;   /* teal   */
  --acc3:#b58a5a;   /* copper */
  --acc4:#9aa06a;   /* olive  */
  --ok:#6fae84;
  --warn:#cba14e;
  --due:#c66a60;
  --ksef:#7fa6a0;
  --shadow:0 18px 44px rgba(0,0,0,.5);
  --nav-active-bg:#22262c;
  --nav-active-fg:#d8c9a0;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}

/* KORPO — clean professional B2B SaaS (Pipedrive / HubSpot register).
   Cool light, white panels, signal-blue. The non-neon default for IT/Sprzedaż B2B. */
[data-skin="korpo"]{
  --bg:#f4f6fa;
  --bg-image:none;
  --ink:#0f172a;
  --muted:#64748b;
  --faint:#94a3b8;
  --panel:#ffffff;
  --panel-blur:0px;
  --solid:#ffffff;
  --line:#e2e8f0;
  --line2:#cbd5e1;
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#2563eb;   /* blue   */
  --acc2:#0891b2;   /* cyan   */
  --acc3:#7c3aed;   /* violet */
  --acc4:#059669;   /* green  */
  --ok:#16a34a;
  --warn:#d97706;
  --due:#dc2626;
  --ksef:#2563eb;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 10px 26px rgba(15,23,42,.05);
  --nav-active-bg:#eaf1ff;
  --nav-active-fg:#1d4ed8;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}

/* KOBALT — clean dark-professional B2B (Linear / Vercel register).
   The calm dark-mode option for IT — pro, not neon. Companion to KORPO (light). */
[data-skin="kobalt"]{
  --bg:#0b0f17;
  --bg-image:none;
  --ink:#e6edf6;
  --muted:#8b97a8;
  --faint:#5c6675;
  --panel:#131a26;
  --panel-blur:0px;
  --solid:#131a26;
  --line:#222c3a;
  --line2:#2f3b4d;
  --radius:12px;
  --radius-sm:8px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#5b8cff;   /* cobalt */
  --acc2:#38bdf8;   /* sky    */
  --acc3:#a78bfa;   /* violet */
  --acc4:#34d399;   /* emerald*/
  --ok:#34d399;
  --warn:#fbbf24;
  --due:#f87171;
  --ksef:#5b8cff;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --nav-active-bg:#182438;
  --nav-active-fg:#cfe0ff;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}

/* FRACHT — clean light TMS (Trans.eu web / boxTMS register).
   The light-mode option for logistyka — companion to SPEDYCJA (dark navy). */
[data-skin="fracht"]{
  --bg:#eef2f7;
  --bg-image:none;
  --ink:#14202e;
  --muted:#5f7186;
  --faint:#93a3b5;
  --panel:#ffffff;
  --panel-blur:0px;
  --solid:#ffffff;
  --line:#dde5ee;
  --line2:#c5d1de;
  --radius:9px;
  --radius-sm:6px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#1e6fd6;   /* signal blue */
  --acc2:#0e7490;   /* deep teal   */
  --acc3:#b45309;   /* amber/myto  */
  --acc4:#15803d;   /* green       */
  --ok:#15803d;
  --warn:#c2710c;
  --due:#dc2626;
  --ksef:#1e6fd6;
  --shadow:0 1px 2px rgba(20,32,46,.06), 0 8px 22px rgba(20,32,46,.05);
  --nav-active-bg:#e6f0fb;
  --nav-active-fg:#1657a8;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}

/* DYŻUR — dark FSM control panel (night/on-call dispatch).
   Dark graphite + safety-amber — companion to POLOWY (light slate). */
[data-skin="dyzur"]{
  --bg:#14171c;
  --bg-image:none;
  --ink:#e8eaed;
  --muted:#8a909a;
  --faint:#5a606a;
  --panel:#1c2026;
  --panel-blur:0px;
  --solid:#1c2026;
  --line:#2a2f37;
  --line2:#3a414b;
  --radius:9px;
  --radius-sm:6px;
  --radius-pill:999px;
  --font-display:"Outfit", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#f59e0b;   /* safety amber */
  --acc2:#3b82f6;   /* blue   */
  --acc3:#f97316;   /* orange */
  --acc4:#22c55e;   /* green  */
  --ok:#22c55e;
  --warn:#f59e0b;
  --due:#ef4444;
  --ksef:#3b82f6;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.45);
  --nav-active-bg:#2a2310;
  --nav-active-fg:#fcd34d;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}

/* WIECZÓR — dark-luxe boutique hotel (upscale-hotel-at-night).
   Warm charcoal + brass + bottle-green, serif Fraunces — companion to BUTIK (light ivory). */
[data-skin="wieczor"]{
  --bg:#1a1714;
  --bg-image:none;
  --ink:#efe9df;
  --muted:#a89e8f;
  --faint:#6e6557;
  --panel:#221e1a;
  --panel-blur:0px;
  --solid:#221e1a;
  --line:#322c25;
  --line2:#43392f;
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", monospace;
  --acc1:#c9a24a;   /* brass  */
  --acc2:#4a8a78;   /* bottle-green */
  --acc3:#c47a4a;   /* terracotta   */
  --acc4:#a87a9a;   /* plum   */
  --ok:#5fa783;
  --warn:#d9a441;
  --due:#d4685c;
  --ksef:#c9a24a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 36px rgba(0,0,0,.5);
  --nav-active-bg:#2e2618;
  --nav-active-fg:#e8d3a0;
  --nav-active-mark:inset 3px 0 0 var(--acc1);
}