/* ── base.css ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --font-display: 'DM Serif Display', Georgia, serif;
    --font-body:    'DM Sans', system-ui, sans-serif;

    --bg:           #f7f6f3;
    --surface:      #ffffff;
    --surface-2:    #f2f1ee;
    --border:       #e4e2dc;
    --border-strong:#c8c5bc;

    --text-1:       #1a1916;
    --text-2:       #6b6860;
    --text-3:       #9e9b95;

    --accent:       #2d5a3d;
    --accent-lt:    #e8f0eb;
    --accent-hover: #234830;
    --accent-border:#c5dbc9;

    --red:          #c0392b;
    --red-lt:       #fdf0ee;
    --red-border:   #e2c4c4;

    --toast-bg:     #1a1916;
    --toast-link:   #c8f0d0;

    --shadow-sm:    0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 14px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:    0 8px 28px rgba(0,0,0,0.13), 0 3px 8px rgba(0,0,0,0.07);

    --r-sm: 5px;
    --r-md: 9px;
    --r-lg: 13px;

    --topbar-h:   50px;
    --timebar-h:  52px;
    --card-w:     272px;
}

html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-1);
    background: var(--bg);
}

button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select { font-family: var(--font-body); font-size: 13px; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

/* ── Flash-prevention: applied instantly from localStorage before JSON theme loads ── */
[data-theme="dark"] {
    --bg:           #1a1916;
    --surface:      #242220;
    --surface-2:    #2c2a27;
    --border:       #3a3733;
    --border-strong:#4d4a45;
    --text-1:       #e8e6e1;
    --text-2:       #9e9b95;
    --text-3:       #6b6860;
    --accent:       #5ba37a;
    --accent-lt:    #1e2e24;
    --accent-hover: #6bb88c;
    --accent-border:#3a6b4f;
    --red:          #e05a4e;
    --red-lt:       #2e1512;
    --red-border:   #4a2020;
    --toast-bg:     #0d0c0a;
    --toast-link:   #a0d4b0;
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
    --shadow-md:    0 4px 14px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.30);
    --shadow-lg:    0 8px 28px rgba(0,0,0,0.55), 0 3px 8px rgba(0,0,0,0.35);
}