:root {
    --bg: #12161c;
    --surface: #1b212b;
    --surface-alt: #232a35;
    --border: #313a48;
    --text: #e8ecf1;
    --text-muted: #9aa5b3;
    --accent-blue: #0057b7;
    --accent-blue-hover: #1c6fd6;
    --accent-yellow: #ffd700;
    --accent-yellow-hover: #ffe14d;
    --danger: #e5484d;
    --success: #2fbf71;
    --radius: 10px;
    --radius-lg: 16px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* elegant, readable system serif for titles + headings */
    --font-serif: "Iowan Old Style", "Palatino Linotype", "Palatino", "Book Antiqua", Georgia, "Times New Roman", serif;

    /* per-notebook accent, set from JS; falls back to Ukraine blue */
    --notebook-accent: #0057b7;
    /* signature blue→yellow gradient used on borders/accents */
    --grad-ua: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-yellow) 100%);
    --grad-ua-soft: linear-gradient(135deg, rgba(0,87,183,0.9) 0%, rgba(255,215,0,0.9) 100%);
    --shadow-pop: 0 12px 34px rgba(0, 0, 0, 0.45);
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
}

a {
    color: var(--accent-blue-hover);
}

button {
    font-family: inherit;
    cursor: pointer;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    background: var(--surface-alt);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--accent-blue);
    outline-offset: 1px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg);
}
::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 6px;
}