*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
}
button { font-family: inherit; }
input { font-family: inherit; }

/* Dark is the default paint before app.js resolves the real preference (avoids a flash). */
:root, :root[data-theme="dark"] {
    --bg-app: #0b141a;
    --bg-header: #202c33;
    --bg-panel: #111b21;
    --bg-card: #182229;
    --bg-card-hover: #202c33;
    --bg-bubble-in: #202c33;
    --bg-bubble-out: #005c4b;
    --bg-wallpaper: #0b141a;
    --wallpaper-image: url("../images/background.png");
    --text-primary: #e9edef;
    --text-secondary: #8696a0;
    --text-on-accent: #ffffff;
    --accent: #00a884;
    --accent-strong: #06cf9c;
    --border-subtle: #2a3942;
    --danger: #f15c6d;
    --shadow: 0 2px 10px rgba(0,0,0,0.4);
    --overlay-bg: rgba(0,0,0,0.55);
    --pill-bg: #1c272d;
    --input-bg: #2a3942;
}

:root[data-theme="light"] {
    --bg-app: #f0f2f5;
    --bg-header: #008069;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f5f6f6;
    --bg-bubble-in: #ffffff;
    --bg-bubble-out: #d9fdd3;
    --bg-wallpaper: #e5ddd5;
    --wallpaper-image: url("../images/backgroundlight.png");
    --text-primary: #111b21;
    --text-secondary: #667781;
    --text-on-accent: #ffffff;
    --accent: #008069;
    --accent-strong: #00a884;
    --border-subtle: #e9edef;
    --danger: #d3313c;
    --shadow: 0 2px 10px rgba(0,0,0,0.12);
    --overlay-bg: rgba(0,0,0,0.4);
    --pill-bg: #f0f2f5;
    --input-bg: #ffffff;
}

body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    transition: background-color 0.2s, color 0.2s;
}

.hidden { display: none !important; }