/* Cadre Theme - Dark Mode Only with Cyan CMYK Accent */

:root {
    /* Force dark mode */
    color-scheme: dark;

    /* Dark background with subtle cyan tint */
    --color-bg: #0a0a0f;
    --color-surface: #12121a;
    --color-text: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-border: #2a2a35;

    /* Cyan CMYK accent (bright) */
    --accent-primary: #00d4ff;
    --accent-hover: #00e5ff;
    --color-accent: #00d4ff;
    --color-accent-hover: #00e5ff;

    /* Cyan gradient background colors */
    --gradient-color-1: rgba(0, 212, 255, 0.15);
    --gradient-color-2: rgba(0, 229, 255, 0.12);
    --gradient-color-3: rgba(0, 180, 255, 0.08);
    --gradient-color-4: rgba(0, 200, 255, 0.06);

    /* Shadows for dark mode */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* Cyan-tinted mesh gradient background */
body::before {
    background:
        radial-gradient(at 27% 37%, rgba(0, 212, 255, 0.2) 0px, transparent 50%),
        radial-gradient(at 97% 21%, rgba(0, 180, 255, 0.15) 0px, transparent 50%),
        radial-gradient(at 52% 99%, rgba(0, 150, 255, 0.12) 0px, transparent 50%),
        radial-gradient(at 10% 29%, rgba(0, 200, 255, 0.1) 0px, transparent 50%),
        radial-gradient(at 97% 96%, rgba(0, 220, 255, 0.08) 0px, transparent 50%);
    filter: blur(120px) saturate(120%);
}

/* Frameless app icon for homepage */
.app-icon-image {
    width: 160px;
    height: 160px;
    transition: transform 0.2s ease;
}

.app-icon-image:hover {
    transform: scale(1.05);
}