/* =========================================================================
   SHARED THEME — design tokens and the handful of base rules every page
   genuinely has in common. One file, one place to improve the look of
   the whole app, rather than the same variables copy-pasted into every
   page and quietly drifting apart over time.

   Plain CSS throughout this rewrite — deliberately no Tailwind or other
   framework. The old app's redesign effort was very likely being
   silently overridden by a framework's own dynamically-injected styles
   loading after ours, and neither of us could see that fight happening.
   Writing every rule ourselves removes that entire class of risk.

   Page-specific layout (a login card's centering, a dashboard's project
   grid) stays in each page's own <style> block — this file is only for
   what's actually shared, not a dumping ground for everything.
   ========================================================================= */

:root {
    --bg: #17161c;
    --surface: #1e1d24;
    --surface-raised: #26242d;
    --line: #34323c;
    --ink: #ede9e3;
    --ink-dim: #9c98a3;
    --accent: #6f9cb8;
    --accent-deep: #3b6e91;
    --brass: #b08d57;
    --good: #7ba888;
    --warn: #c9a15a;
    --bad: #c47a6f;
    --font-display: 'Fraunces', Georgia, serif;
    --font-ui: 'Manrope', -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
}

/* The header bar used by every page that has a persistent top bar
   (the dashboard, a project's detail view, and anything added later
   that follows the same pattern). Pages without a header — like the
   login screen, which centers a single card instead — simply don't
   include a <header> element and this rule never applies. */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--line);
}