/* =====================================================================
   base.css — design tokens, reset, typography
   ===================================================================== */

:root {
    /* Tell the browser to render native controls (incl. the date-input calendar
       picker) for a dark UI — without this Chrome paints the calendar icon dark
       on our dark inputs, so it's invisible and the picker seems missing. */
    color-scheme: dark;
    /* Surface palette (dark, high-contrast) */
    --bg-base:    #0b0f17;
    --bg-panel:   #141a26;
    --bg-elev:    #1c2433;
    --bg-input:   #0f1420;
    --border:     #2a3447;
    --border-strong: #3a4660;

    /* Text */
    --text:       #f5f7fb;
    --text-dim:   #b4bccc;
    --text-mute:  #8e98ab;   /* readable secondary text (no faded/low-contrast text — ADA) */

    /* Brand / accent */
    --accent:     #3b82f6;
    --accent-hi:  #60a5fa;
    --accent-dim: #1e3a8a;
    /* Brand blue dark enough to carry WHITE text at AA (4.5:1). --accent is
       #3b82f6, which is only 3.68:1 under white — fine as a border, a fill or
       an icon (1.4.11 asks 3:1), not as a background behind a text label.
       Use this, not --accent, whenever --accent-fg sits on top. */
    --accent-strong: #1d4ed8;
    --accent-fg:  #ffffff;
    --nav-active-bg: var(--accent-dim);
    --nav-active-fg: var(--text);

    /* Priority */
    --priority-urgent: #ef4444;
    --priority-high:   #f97316;
    --priority-medium: #eab308;
    --priority-low:    #22c55e;

    /* Statuses */
    --status-not_started:     #6b7280;
    --status-in_progress:     #3b82f6;
    --status-internal_review: #a855f7;
    --status-client_review:   #06b6d4;
    --status-implementation:  #eab308;
    /* Task-row progress fill (dashboard). Dark enough that bright white text
       and the status chips stay legible on top of it. */
    --row-fill:        #17325c;
    --row-fill-hover:  #1d3c6e;
    --row-fill-text:   #f4f7fb;
    --row-chip-bg:     rgba(0, 0, 0, 0.28);
    /* Due-date colours: past = red, today = yellow. Bright enough to read on
       the row fill as well as the plain panel. */
    --date-overdue:    #ff6b6b;
    --date-today:      #fbbf24;
    /* Message bubbles. Blue = you, purple = everyone else, in both themes.
       These replace a per-author tint (14% of the author's own avatar colour
       mixed into --bg-elev, applied only to your own messages) — which meant
       the two sides of a conversation were told apart by a colour that changed
       from person to person, and other people's messages carried no colour at
       all. Sender-vs-other is the distinction that actually matters when you
       are scanning a thread, so it is the one the colour now encodes.
       Chosen dark enough to carry --text, --text-dim AND --msg-link at AA. */
    --msg-mine-bg:   #1a3459;
    --msg-other-bg:  #38275e;
    /* Links inside a message body. --accent (#3b82f6) manages 4.23:1 on the old
       flat bubble and less on these, so the body gets the brighter ramp rung —
       4.9:1 and 5.1:1. Scoped to .note__body: this is not a claim about links
       everywhere, only about the surface this change darkened. */
    --msg-link:      #60a5fa;
    --notif-new:              #4a86ff;   /* "new activity" badge on board cards */
    --status-on_hold:         #f97316;   /* amber — paused, needs a nudge */
    --status-pending_client:  #ec4899;   /* pink — waiting on someone outside */
    --status-completed:       #22c55e;

    /* Freshness gradient endpoints (used by JS) */
    --fresh-far:   #22c55e;
    --fresh-soon:  #eab308;
    --fresh-now:   #f97316;
    --fresh-late:  #dc2626;
    --fresh-dead:  #991b1b;
    --fresh-none:  #6b7280;

    /* Layout */
    --sidebar-w:   240px;
    --topbar-h:    56px;
    --radius:      8px;
    --radius-sm:   6px;
    --shadow-1:    0 1px 2px rgba(0,0,0,.4);
    --shadow-2:    0 8px 24px rgba(0,0,0,.45);
    --code-bg:     rgba(255,255,255,0.05);

    /* Spacing scale */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;

    /* Density (default = comfortable). Compact overrides via [data-density="compact"] on <body> */
    --row-h: 56px;
    --card-pad: 16px;

    /* Type */
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "SF Mono", Menlo, Consolas, monospace;

    --fz-12: 12px; --fz-14: 14px; --fz-16: 16px;
    --fz-20: 20px; --fz-24: 24px; --fz-32: 32px;
}

[data-density="compact"] {
    --row-h: 40px;
    --card-pad: 10px;
}

/* Text size (per-user, Settings). Bumps every --fz token by +2/+4/+6px on
   <body data-text-scale="N">, so text across the site grows uniformly. */
[data-text-scale="2"] { --fz-12: 14px; --fz-14: 16px; --fz-16: 18px; --fz-20: 22px; --fz-24: 26px; --fz-32: 34px; }
[data-text-scale="4"] { --fz-12: 16px; --fz-14: 18px; --fz-16: 20px; --fz-20: 24px; --fz-24: 28px; --fz-32: 36px; }
[data-text-scale="6"] { --fz-12: 18px; --fz-14: 20px; --fz-16: 22px; --fz-20: 26px; --fz-24: 30px; --fz-32: 38px; }

/* Theme (default = dark). Light overrides via [data-theme="light"] on <body> — settings choice, no OS auto-detect. */
[data-theme="light"] {
    color-scheme: light;
    --bg-base:    #f7f8fb;
    --bg-panel:   #ffffff;
    --bg-elev:    #ffffff;
    --bg-input:   #ffffff;
    --border:     #dde2ec;
    --border-strong: #c3cadd;

    --text:       #111827;
    --text-dim:   #3f4756;
    --text-mute:  #5b6472;   /* readable secondary text (no faded/low-contrast text — ADA) */

    --accent-fg:  #ffffff;

    --shadow-1:   0 1px 2px rgba(15,23,42,.08);
    --shadow-2:   0 8px 24px rgba(15,23,42,.12);
    --code-bg:    rgba(15,23,42,0.06);
    --nav-active-bg: #e3ecfd;
    --nav-active-fg: #1d4ed8;
    --notif-new:  #1d4ed8;   /* darker blue so it stays legible on white */
    /* Same pairing, inverted: pale washes under the dark --text. */
    --msg-mine-bg:   #dbeafe;
    --msg-other-bg:  #ece7fd;
    /* #3b82f6 cannot reach AA on any light background (3.69:1 even on pure
       white — a pre-existing gap, not one this change introduced). On the tinted
       bubble it would be 3.0:1, so the message body uses the darker blue that
       --nav-active-fg and --notif-new already use here: 5.5:1. */
    --msg-link:      #1d4ed8;
    /* Light mode: a light blue wash with dark text on top. */
    --row-fill:        #dbeafe;
    --row-fill-hover:  #cfe3fd;
    --row-fill-text:   #0f1b2d;
    --row-chip-bg:     rgba(255, 255, 255, 0.6);
    /* Darker on a light background so both still pass as readable. */
    --date-overdue:    #dc2626;
    --date-today:      #b45309;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* The hidden attribute must always win — components toggle it to open/close
   flyouts (board switcher, message ⋯ menu, emoji picker), and their own
   display:flex/grid would otherwise override the UA [hidden]{display:none}. */
[hidden] { display: none !important; }
body {
    background: var(--bg-base);
    color: var(--text);
    font-family: var(--font-base);
    font-size: var(--fz-14);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--sp-3) 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fz-24); }
h2 { font-size: var(--fz-20); }
h3 { font-size: var(--fz-16); }

p { margin: 0 0 var(--sp-3) 0; }
a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
small { font-size: var(--fz-12); color: var(--text-dim); }

ul, ol { margin: 0 0 var(--sp-3) 0; padding-left: 20px; }
li { margin: 2px 0; }
/* A nested list is indented by the padding-left above, but the bottom margin
   is meant to separate a list from what FOLLOWS it — inside a parent <li> it
   just opens a gap mid-list. Only reachable since message bodies started
   nesting for real (ticket #43); Quill used to emit one flat list. */
li > ul, li > ol { margin-bottom: 0; }

code, pre { font-family: var(--font-mono); font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }

::selection { background: var(--accent); color: var(--accent-fg); }

/* Focus */
:focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Form base */
input, select, textarea, button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
input, select, textarea {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    color: var(--text);
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    outline: none;
}
textarea { resize: vertical; min-height: 80px; }

label { display: block; font-size: var(--fz-12); color: var(--text-dim); margin-bottom: var(--sp-1); text-transform: uppercase; letter-spacing: 0.04em; }
.field { margin-bottom: var(--sp-4); }
.field-row { display: flex; gap: var(--sp-3); }
.field-row > .field { flex: 1; }

/* Utility */
.hide { display: none !important; }
.muted { color: var(--text-dim); }
.dim   { color: var(--text-mute); }
.mono  { font-family: var(--font-mono); }
.right { text-align: right; }
.spacer { flex: 1; }
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.row-wrap { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.grow { flex: 1; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }