/* ===== Auctopus Light Mode (default) ===== */
:root {
    --ctp-base: #f8fafb;
    --ctp-mantle: #f0f4f6;
    --ctp-crust: #e8edf0;
    --ctp-surface0: #ffffff;
    --ctp-surface1: #e2e8ed;
    --ctp-surface2: #cbd5dc;
    --ctp-overlay0: #8b9baa;
    --ctp-overlay1: #6b7d8d;
    --ctp-overlay2: #5c6e7e;
    --ctp-subtext0: #4d5f6e;
    --ctp-subtext1: #3e505f;
    --ctp-text: #2d3f4e;
    --ctp-lavender: #6366f1;
    --ctp-blue: #0f7b8a;
    --ctp-sapphire: #0284c7;
    --ctp-sky: #0ea5e9;
    --ctp-teal: #0d9488;
    --ctp-green: #16a34a;
    --ctp-yellow: #d97706;
    --ctp-peach: #ea580c;
    --ctp-maroon: #dc2626;
    --ctp-red: #dc2626;
    --ctp-mauve: #0f4c5c;
    --ctp-pink: #ec4899;
    --ctp-flamingo: #f43f5e;
    --ctp-rosewater: #fb7185;

    /* --- Design System Tokens --- */
    /* Elevation */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* Glass / Blur */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.06);
    --glass-blur: 12px;

    /* Surface interactions */
    --surface-hover: rgba(0, 0, 0, 0.03);
    --surface-active: rgba(0, 0, 0, 0.06);

    /* Glow accents */
    --glow-blue: 0 0 20px rgba(15, 123, 138, 0.15);
    --glow-green: 0 0 20px rgba(22, 163, 74, 0.15);

    /* Border radius scale */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;

    /* Typography */
    --font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, monospace;
    --text-xs: 0.6875rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-lg: 1rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
}

/* ===== Catppuccin Mocha ===== */
.mocha {
    --ctp-base: #1e1e2e;
    --ctp-mantle: #181825;
    --ctp-crust: #11111b;
    --ctp-surface0: #313244;
    --ctp-surface1: #45475a;
    --ctp-surface2: #585b70;
    --ctp-overlay0: #6c7086;
    --ctp-overlay1: #7f849c;
    --ctp-overlay2: #9399b2;
    --ctp-subtext0: #a6adc8;
    --ctp-subtext1: #bac2de;
    --ctp-text: #cdd6f4;
    --ctp-lavender: #b4befe;
    --ctp-blue: #89b4fa;
    --ctp-sapphire: #74c7ec;
    --ctp-sky: #89dceb;
    --ctp-teal: #94e2d5;
    --ctp-green: #a6e3a1;
    --ctp-yellow: #f9e2af;
    --ctp-peach: #fab387;
    --ctp-maroon: #eba0ac;
    --ctp-red: #f38ba8;
    --ctp-mauve: #cba6f7;
    --ctp-pink: #f5c2e7;
    --ctp-flamingo: #f2cdcd;
    --ctp-rosewater: #f5e0dc;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
    --glass-bg: rgba(30, 30, 46, 0.75);
    --glass-border: rgba(255, 255, 255, 0.06);
    --surface-hover: rgba(255, 255, 255, 0.03);
    --surface-active: rgba(255, 255, 255, 0.06);
    --glow-blue: 0 0 20px rgba(137, 180, 250, 0.12);
    --glow-green: 0 0 20px rgba(166, 227, 161, 0.12);
}

/* ===== Auctopus Dark Mode ===== */
.dark {
    --ctp-base: #0a0a0a;
    --ctp-mantle: #111111;
    --ctp-crust: #080808;
    --ctp-surface0: #1a1a1a;
    --ctp-surface1: #2a2a2a;
    --ctp-surface2: #3a3a3a;
    --ctp-overlay0: #737373;
    --ctp-overlay1: #8a8a8a;
    --ctp-overlay2: #a1a1a1;
    --ctp-subtext0: #b8b8b8;
    --ctp-subtext1: #cfcfcf;
    --ctp-text: #e5e5e5;
    --ctp-lavender: #818cf8;
    --ctp-blue: #2ec4d6;
    --ctp-sapphire: #38bdf8;
    --ctp-sky: #38bdf8;
    --ctp-teal: #2dd4bf;
    --ctp-green: #4ade80;
    --ctp-yellow: #fbbf24;
    --ctp-peach: #fb923c;
    --ctp-maroon: #f87171;
    --ctp-red: #f87171;
    --ctp-mauve: #5eead4;
    --ctp-pink: #f472b6;
    --ctp-flamingo: #fb7185;
    --ctp-rosewater: #fda4af;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
    --glass-bg: rgba(10, 10, 10, 0.8);
    --glass-border: rgba(255, 255, 255, 0.05);
    --surface-hover: rgba(255, 255, 255, 0.04);
    --surface-active: rgba(255, 255, 255, 0.07);
    --glow-blue: 0 0 20px rgba(46, 196, 214, 0.12);
    --glow-green: 0 0 20px rgba(74, 222, 128, 0.12);
}

[v-cloak] { display: none; }

/* Tooltip */
[data-tip] { position: relative; }
[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background: var(--ctp-surface0);
    color: var(--ctp-text);
    border: 1px solid var(--ctp-surface1);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s, transform 0.15s;
    z-index: 50;
}
[data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
* { font-family: var(--font-mono); }
h1, h2, h3, h4, h5, h6, label, .font-display { font-family: var(--font-display); }

/* Custom scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ctp-mantle); }
::-webkit-scrollbar-thumb { background: var(--ctp-surface1); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ctp-surface2); }

/* Gradient text - Auctopus accent */
.gradient-text {
    background: linear-gradient(135deg, var(--ctp-blue), var(--ctp-mauve));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Selection highlight */
::selection {
    background: var(--ctp-surface2);
    color: var(--ctp-text);
}

/* Custom input/select styling */
input, select {
    font-feature-settings: 'calt' 1, 'liga' 1;
}

/* Style optgroup labels */
select optgroup {
    font-weight: 600;
    color: var(--ctp-blue);
    background: var(--ctp-surface0);
    padding: 4px 0;
}
select optgroup option {
    font-weight: 400;
    color: var(--ctp-text);
    background: var(--ctp-surface1);
    padding-left: 12px;
}

/* Subtle glow effect on hover */
.glow-hover:hover {
    box-shadow: 0 0 20px rgba(27, 154, 170, 0.1);
}

/* Hitlist indeterminate progress bar */
@keyframes indeterminate {
    0% { transform: translateX(-100%); }
    50% { transform: translateX(200%); }
    100% { transform: translateX(-100%); }
}