/* assets/css/global.css */

/* CI-Variablen */
:root {
    --bg: #0b1020;
    --bg2: #0a0f1c;
    --accent: #22d3ee;
    --accent2: #0ea5e9;
    --text: #ffffff;
    --t2: rgba(255, 255, 255, .80);
    --t3: rgba(255, 255, 255, .60);
    --t4: rgba(255, 255, 255, .35);
    --border: rgba(255, 255, 255, .10);
    /* Subtle raised-panel fills used throughout /pm's custom (non-Tailwind) CSS. */
    --pm-surface-1: rgba(255, 255, 255, .05);
    --pm-surface-2: rgba(255, 255, 255, .1);
}

/* Light theme override — currently only used by /pm (scoped via [data-theme="light"]
   on .pm-page), not applied app-wide. */
[data-theme="light"] {
    --bg: #f4f6fb;
    --bg2: #e7ebf3;
    --accent: #0891b2;
    --accent2: #0369a1;
    --text: #0f1420;
    --t2: rgba(15, 20, 32, .75);
    --t3: rgba(15, 20, 32, .55);
    --t4: rgba(15, 20, 32, .38);
    --border: rgba(15, 20, 32, .14);
    --pm-surface-1: rgba(15, 20, 32, .035);
    --pm-surface-2: rgba(15, 20, 32, .06);
}

/* Reset + Base */
html, body, #__nuxt {
    min-height: 100vh;
    min-width: 100vw;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, sans-serif;
    background: radial-gradient(800px 400px at 80% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    radial-gradient(600px 300px at 10% -5%, color-mix(in srgb, var(--accent2) 15%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg2) 100%);
}

/* Vuetify Overrides global */
.v-field, .v-textarea, .v-switch, .v-slider {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.panel {
    backdrop-filter: blur(5deg);
}

/* Tooltip overrides */
.v-tooltip > .v-overlay__content {
    background-color: color-mix(in srgb, var(--bg2) 90%, black 10%) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}