/*
 * Copyright (C) [2025] [Netzint GmbH]
 * All rights reserved.
 *
 * This software is dual-licensed under the terms of:
 *
 * 1. The GNU Affero General Public License (AGPL-3.0-or-later), as published by the Free Software Foundation.
 *    You may use, modify and distribute this software under the terms of the AGPL, provided that you comply with its conditions.
 *
 *    A copy of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.html
 *
 * OR
 *
 * 2. A commercial license agreement with Netzint GmbH. Licensees holding a valid commercial license from Netzint GmbH
 *    may use this software in accordance with the terms contained in such written agreement, without the obligations imposed by the AGPL.
 *
 * If you are uncertain which license applies to your use case, please contact us at info@netzint.de for clarification.
 */

:root,
.dark {
  --radius: 0.25rem;
  --ci-light-green: 143 192 70;
  --ci-dark-blue: 0 129 198;
  --ci-light-blue: 103 178 224;
  --ci-dark-gray: 132 132 147;
  --color-danger: 220 38 38;
  --color-danger-light: 248 113 113;
  --color-warning: 255 215 0;
  --color-warning-light: 255 208 12;
  --color-success: 55 238 5;
  --background: 0 0 0;
  --foreground: 255 255 255;
  --muted-foreground: 187 187 187;
  --muted-background: 26 26 26;
  --primary: 0 129 198;
  --primary-foreground: 255 255 255;
  --secondary: 209 213 219;
  --secondary-foreground: 45 45 48;
  --muted: 45 55 72;
  --muted-light: 58 69 87;
  --accent: 45 45 48;
  --accent-light: 60 63 69;
  --accent-foreground: 255 255 255;
  --input: 226 232 240;
  --card-foreground: 255 255 255;
  --popover: 15 23 42;
  --popover-foreground: 255 255 255;
  --border: 203 212 228;
  --destructive: 255 0 0;
  --destructive-foreground: 236 247 255;
  --ring: 140 164 182;
}

:root {
  --menubar-max-width: 300px;
}

.light {
  --background: 255 255 255;
  --foreground: 0 0 0;
  --muted-foreground: 80 80 80;
  --muted-background: 187 187 187;
  --muted-light: 220 220 220;
  --primary: 0 129 198;
  --primary-foreground: 255 255 255;
  --secondary: 46 42 36;
  --secondary-foreground: 200 200 195;
  --muted: 177 177 172;
  --accent: 201 204 210;
  --accent-light: 209 213 219;
  --accent-foreground: 0 0 0;
  --input: 29 23 15;
  --card-foreground: 0 0 0;
  --popover: 240 232 213;
  --popover-foreground: 0 0 0;
  --border: 51 51 51;
  --destructive: 255 0 0;
  --destructive-foreground: 19 8 0;
  --ring: 115 91 73;
}

.bg-glass {
  background-color: color-mix(in srgb, rgb(var(--background)) 25%, transparent);
  box-shadow: 0 0 12px 0px rgba(0, 0, 0, 0.15);
}

.dark .bg-glass {
  background-color: color-mix(in srgb, rgb(var(--background)) 25%, transparent);
  box-shadow: 0 0 8px 0px rgba(255, 255, 255, 0.15);
}

.liquid-glass {
  background-color: color-mix(in srgb, rgb(var(--foreground)) 6%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid color-mix(in srgb, rgb(var(--foreground)) 18%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, rgb(var(--foreground)) 20%, transparent),
    0 6px 28px rgba(0, 0, 0, 0.45);
  border-radius: 0.5rem;
}

.light .liquid-glass {
  background-color: color-mix(in srgb, rgb(var(--foreground)) 4%, transparent);
  border-color: color-mix(in srgb, rgb(var(--foreground)) 10%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 32px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.08);
}

html :is(.liquid-glass-panel, .liquid-glass.liquid-glass-panel) {
  background-color: rgba(10, 12, 16, 0.82);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 46%);
  backdrop-filter: blur(20px) saturate(160%) contrast(105%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 26px rgba(0, 0, 0, 0.22);
}

.light :is(.liquid-glass-panel, .liquid-glass.liquid-glass-panel) {
  background-color: rgba(226, 232, 240, 0.78);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.55), rgba(148, 163, 184, 0.18) 46%);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 26px rgba(15, 23, 42, 0.18),
    0 2px 8px rgba(15, 23, 42, 0.1);
}

.liquid-glass-card {
  position: relative;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.18);
}

.liquid-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.light .liquid-glass-card {
  background-color: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(15, 23, 42, 0.1);
}

.light .liquid-glass-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%);
}

.liquid-glass-tile {
  background-color: color-mix(in srgb, rgb(var(--foreground)) 7%, transparent);
  background-image: linear-gradient(
    145deg,
    color-mix(in srgb, rgb(var(--foreground)) 16%, transparent),
    transparent 48%
  );
  backdrop-filter: blur(16px) saturate(160%) contrast(108%);
  border: 1px solid color-mix(in srgb, rgb(var(--foreground)) 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, rgb(var(--foreground)) 22%, transparent),
    0 8px 22px rgba(0, 0, 0, 0.22);
}

.liquid-glass-tile-active {
  background-color: color-mix(in srgb, rgb(var(--foreground)) 10%, transparent);
  border-color: color-mix(in srgb, rgb(var(--foreground)) 28%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, rgb(var(--foreground)) 30%, transparent),
    0 14px 28px rgba(0, 0, 0, 0.28);
}

.light .liquid-glass-tile {
  background-color: color-mix(in srgb, rgb(var(--background)) 24%, transparent);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.56), transparent 48%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 22px rgba(15, 23, 42, 0.1);
}

.light .liquid-glass-tile-active {
  background-color: color-mix(in srgb, rgb(var(--background)) 32%, transparent);
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 28px rgba(15, 23, 42, 0.14);
}

.liquid-glass-soft {
  background-color: rgba(22, 22, 24, 0.46);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.07), transparent 46%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
}

.light .liquid-glass-soft {
  background-color: rgba(245, 246, 248, 0.58);
  background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(235, 236, 238, 0.12) 46%);
  border-color: rgba(15, 23, 42, 0.1);
}

.gradient-text {
  background: linear-gradient(to right, rgb(var(--ci-light-green)), rgb(var(--ci-dark-blue)));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.dark .gradient-text {
  background: linear-gradient(
    to right,
    color-mix(in oklab, rgb(var(--ci-light-green)) 50%, white),
    color-mix(in oklab, rgb(var(--ci-dark-blue)) 50%, white)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}