/* =========================================================
   BASE
   Reset, design tokens, typography and plain HTML defaults.
   Do not put layout, modal, sidebar or page-specific rules here.
========================================================= */

:root {
    --pm-blue: #1b4b8a;
    --pm-blue-dark: #143a6b;
    --pm-blue-soft: #edf3fb;
    --pm-blue-soft-border: #c8d8ee;

    --pm-bg: #f5f5f5;
    --pm-card: #ffffff;

    --pm-text: #111827;
    --pm-text-soft: #6b7280;

    --pm-border: #d7d7d7;
    --pm-border-soft: #dbe4f0;
    --pm-border-input: #9ca3af;

    /* Width of the coloured accent line on the left of list cards/rows
       (My Notes, My To-Dos, etc.) — one source of truth so they match. */
    --pm-accent-bar: 6px;

    --pm-header-bg: #dfe8f5;

    --pm-status-notstarted: var(--pm-text-soft);
    --pm-status-inprogress: #1565e0;
    --pm-status-onhold: var(--pm-text);
    --pm-status-late: #dc2626;
    --pm-status-done: #15a34a;

    --pm-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

    --pm-green-bg: #e4f4e8;
    --pm-green-text: #246b3a;

    --pm-amber-bg: #fff0d8;
    --pm-amber-text: #9a5b00;

    --pm-red-bg: #fde3e3;
    --pm-red-text: #a12626;

    --pm-purple-bg: #f3e8ff;
    --pm-purple-text: #6f42c1;

    --pm-radius: 10px;
    --pm-gap: 16px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background: var(--pm-bg);
    color: var(--pm-text);
    font-family: Arial, sans-serif;
}

h1 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--pm-text);
}

h2 {
    font-size: 20px;
}

h3 {
    font-size: 16px;
}

p {
    margin-bottom: 12px;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}