/*
 * Shared visual polish layer.
 * This deliberately changes presentation only: no layout, DOM, or interaction
 * behavior is defined here.
 */
:root {
    --cream: #fbf7f1;
    --warm-white: #fffdf9;
    --blush: #f4ccd5;
    --deep-rose: #a93d57;
    --dusty-rose: #cb657c;
    --sage: #628d70;
    --deep-sage: #365e47;
    --terracotta: #b86142;
    --bark: #5d3e31;
    --charcoal: #28201d;
    --muted: #766863;
    --border: rgba(93, 62, 49, 0.14);
    --border-strong: rgba(93, 62, 49, 0.28);

    --shadow-petal: 0 6px 24px rgba(169, 61, 87, 0.12);
    --shadow-leaf: 0 12px 36px rgba(40, 32, 29, 0.12);
    --shadow-sm: 0 3px 12px rgba(40, 32, 29, 0.07);
    --shadow-md: 0 8px 24px rgba(40, 32, 29, 0.10);
    --shadow-lg: 0 16px 44px rgba(40, 32, 29, 0.14);
    --shadow-deep: 0 24px 70px rgba(40, 32, 29, 0.19);
}

html {
    scrollbar-color: rgba(169, 61, 87, 0.42) rgba(93, 62, 49, 0.07);
}

body {
    background:
        radial-gradient(circle at 4% 3%, rgba(244, 204, 213, 0.34), transparent 23rem),
        radial-gradient(circle at 96% 12%, rgba(187, 213, 190, 0.28), transparent 27rem),
        var(--cream);
}

::selection {
    background: rgba(169, 61, 87, 0.22);
    color: var(--charcoal);
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(169, 61, 87, 0.32);
    outline-offset: 3px;
}

:where(input, select, textarea) {
    border-color: rgba(93, 62, 49, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

:where(input, select, textarea):focus {
    border-color: rgba(169, 61, 87, 0.62);
    box-shadow: 0 0 0 4px rgba(169, 61, 87, 0.10);
}

/* Keep only the outer ring on icon/input wrappers (login, register, etc.) */
.input-wrap :where(input, select, textarea),
.input-wrap :where(input, select, textarea):focus,
.input-wrap :where(input, select, textarea):focus-visible {
    border: none;
    border-color: transparent;
    box-shadow: none;
    outline: none;
}

.app-shell .card,
.app-shell .stat-card {
    border-color: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.app-shell .card:hover,
.app-shell .stat-card:hover {
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (prefers-reduced-motion: no-preference) {
    .app-shell .card,
    .app-shell .stat-card {
        transition: box-shadow 180ms ease, border-color 180ms ease;
    }
}