/* EchoSignal palette: an investigator's marked-up statement - paper, ink, red pen, highlighter.
   Shared by every page. Risk colours (green/yellow/orange/red) stay in each page because they carry meaning. */

body {
    --paper: #F6F7F9;
    --sheet: #FFFFFF;
    --ink: #18212E;
    --ink-rgb: 24, 33, 46;
    --ink-soft: #4E5968;
    --muted: #6B7482;
    --rule: #DCE0E6;
    --red-pen: #C4291C;
    --red-pen-tint: rgba(196, 41, 28, 0.08);
    --highlighter: #FFEA8A;
    --on-ink: #FFFFFF;
    --hover-wash: rgba(24, 33, 46, 0.06);
}

body:not(.light-theme) {
    --paper: #131A23;
    --sheet: #1B2430;
    --ink: #E6E9EE;
    --ink-rgb: 230, 233, 238;
    --ink-soft: #A9B2BE;
    --muted: #7D8794;
    --rule: #2C3744;
    --red-pen: #F0675A;
    --red-pen-tint: rgba(240, 103, 90, 0.12);
    --highlighter: rgba(255, 225, 90, 0.28);
    --on-ink: #131A23;
    --hover-wash: rgba(230, 233, 238, 0.08);
}

/* Brand mark */
.header-left h1 span,
header h1 span,
.logo h1 span {
    color: var(--red-pen);
}

/* Primary actions: ink, turning red-pen on hover */
.btn-primary:hover:not(:disabled) {
    background: var(--red-pen);
    box-shadow: none;
}

/* Form fields: paper on the white sheet, ink on focus */
body.light-theme :is(textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])) {
    background: var(--paper);
    border-color: var(--rule);
    color: var(--ink);
}

body.light-theme :is(textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"])):focus {
    background: var(--sheet);
    border-color: var(--ink);
}

body.light-theme :is(textarea, input)::placeholder {
    color: var(--muted);
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--red-pen);
    outline-offset: 2px;
}

/* Light/dark toggle icons */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

.theme-toggle svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.theme-toggle .icon-sun,
body.light-theme .theme-toggle .icon-moon {
    display: block;
}

.theme-toggle .icon-moon,
body.light-theme .theme-toggle .icon-sun {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
    }
}