/*
 * FONCER ETHEREAL THEME
 * A dreamy, high-contrast palette inspired by cosmic florals and moonlit surfaces.
 */

:root {
    /* === CORE PALETTE === */
    --night-nebula: #0b0b12;
    --dusky-rose: #2d2126;
    --soft-moonlight: #eaeaea;
    --petal-pink: #e48a96;
    --chrome-reflection: #a8b8c8;
    --cosmic-violet: #6b5b95;

    /* === LEGACY MAPPINGS === */
    --deep-void: #0b0b12;
    --gilded-accent: #e48a96;
    --muted-amethyst: #2d2126;
    --parchment: #eaeaea;

    /* === SURFACE COLORS === */
    --surface: #0b0b12;
    --surface-dim: #0b0b12;
    --surface-bright: #2d2126;
    --surface-container: #1a1216;
    --surface-container-high: #2d2126;
    --surface-container-highest: #3d2e33;
    --surface-container-low: #121018;
    --surface-container-lowest: #08080c;

    /* === TEXT COLORS === */
    --on-surface: #eaeaea;
    --on-surface-variant: #a8b8c8;
    --primary: #eaeaea;
    --on-primary: #0b0b12;
    --secondary: #e48a96;
    --on-secondary: #0b0b12;
    --tertiary: #6b5b95;
    --on-tertiary: #eaeaea;

    /* === ACCENT COLORS === */
    --primary-container: #0b0b12;
    --on-primary-container: #a8b8c8;
    --secondary-container: #b86a74;
    --on-secondary-container: #eaeaea;
    --tertiary-container: #4a3d6b;
    --on-tertiary-container: #a8b8c8;

    /* === UTILITY COLORS === */
    --outline: #a8b8c8;
    --outline-variant: #2d2126;
    --error: #ffb4ab;
    --on-error: #690005;

    /* === TYPOGRAPHY === */
    --font-heading: "Playfair Display", serif;
    --font-body: "Hanken Grotesk", sans-serif;
    --font-accent: "Instrument Sans", sans-serif;

    /* === SPACING === */
    --section-gap: 120px;
    --margin-desktop: 80px;
    --margin-mobile: 20px;
    --gutter: 24px;

    /* === ANIMATION === */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* === DARK MODE OVERRIDES === */
.dark {
    color-scheme: dark;
}

/* === GRAYSCALE HOVER EFFECT (Lookbook) === */
.grayscale-hover {
    filter: grayscale(100%);
    transition:
        filter var(--transition-slow),
        transform var(--transition-slow);
}

.group:hover .grayscale-hover {
    filter: grayscale(0%);
    transform: scale(1.02);
}

/* === SELECTION === */
::selection {
    background-color: var(--petal-pink);
    color: var(--night-nebula);
}