/* ============================================================
   tools. — palette
   Paper, work blue, and one warm marker-yellow accent.
   ============================================================ */

:root {
    --bg: #f7f7f3;
    --bg-secondary: #efefe9;
    --bg-tertiary: #e5e6df;
    --surface-1: #ffffff;
    --surface-2: #f4f4f2;
    --bg-primary: var(--bg); /* legacy */

    --text: #1c211f;
    --text-primary: var(--text);
    --text-secondary: #5f6762;
    --text-muted: #68706b;

    --border: #daddd7;
    --border-strong: #c7cbc4;
    --border-color: var(--border);

    --accent: #2257d8;
    --accent-hover: #1945b1;
    --accent-soft: rgba(34, 87, 216, 0.10);
    --marker: #f2c94c;
    --accent-primary: var(--accent);
    --accent-secondary: var(--accent-hover);
    --primary-color: var(--accent);
    --primary-color-rgb: 34, 87, 216;

    --success: #16a34a;
    --success-bg: #ecfccb;
    --success-text: #166534;
    --danger: #dc2626;
    --error-bg: #fee2e2;
    --error-text: #991b1b;

    --input-bg: #ffffff;
    --input-border: #d4d4d8;
    --input-border-hover: #a1a1aa;
    --input-border-focus: var(--text);

    --button-bg: var(--text);
    --button-text: var(--bg);
    --button-hover: #262626;

    --code-bg: #f4f4f2;
    --code-text: var(--text);

    --selection-bg: var(--text);
    --selection-text: var(--bg);
}

[data-theme="dark"] {
    --bg: #111513;
    --bg-secondary: #181d1a;
    --bg-tertiary: #202622;
    --surface-1: #181d1a;
    --surface-2: #202622;
    --bg-primary: var(--bg);

    --text: #f1f3ef;
    --text-primary: var(--text);
    --text-secondary: #aeb6b0;
    --text-muted: #9aa39d;

    --border: #2a312d;
    --border-strong: #39413c;
    --border-color: var(--border);

    --accent: #7da2ff;
    --accent-hover: #a9c0ff;
    --accent-soft: rgba(125, 162, 255, 0.12);
    --marker: #f2c94c;
    --accent-primary: var(--accent);
    --accent-secondary: var(--accent-hover);
    --primary-color: var(--accent);
    --primary-color-rgb: 125, 162, 255;

    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.10);
    --success-text: #86efac;
    --danger: #f87171;
    --error-bg: rgba(248, 113, 113, 0.10);
    --error-text: #fca5a5;

    --input-bg: #111111;
    --input-border: #2a2a2e;
    --input-border-hover: #3a3a3e;
    --input-border-focus: var(--text);

    --button-bg: var(--text);
    --button-text: var(--bg);
    --button-hover: #e7e5e0;

    --code-bg: #161616;
    --code-text: var(--text);

    --selection-bg: var(--accent);
    --selection-text: var(--bg);
}

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

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: var(--space-6) 0;
}

/* Native form elements baseline */
textarea, input[type="text"], input[type="number"], input[type="search"],
input[type="password"], input[type="email"], input[type="url"], select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    transition: border-color var(--duration-fast) var(--ease-out);
}

textarea:hover, input[type="text"]:hover, input[type="number"]:hover,
input[type="search"]:hover, input[type="password"]:hover,
input[type="email"]:hover, input[type="url"]:hover, select:hover {
    border-color: var(--input-border-hover);
}

textarea:focus, input[type="text"]:focus, input[type="number"]:focus,
input[type="search"]:focus, input[type="password"]:focus,
input[type="email"]:focus, input[type="url"]:focus, select:focus {
    outline: 1px solid var(--text);
    outline-offset: -1px;
    border-color: var(--text);
}

textarea {
    font-family: var(--font-mono);
    line-height: var(--leading-normal);
    resize: vertical;
    min-height: 160px;
    padding: var(--space-3);
}

pre, code {
    background-color: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}

code {
    padding: 0.1em 0.35em;
    font-size: 0.92em;
}

pre {
    padding: var(--space-4);
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

pre code {
    padding: 0;
    background: transparent;
    border-radius: 0;
    font-size: inherit;
}