/* ============================================
   Theme tokens
   ============================================
   This stylesheet is the one every page loads, so it is where the shared
   colour tokens live. Light values on :root, dark/black values in the
   --dm-* blocks below. A custom stylesheet (Settings > Custom CSS) can
   re-theme the app by overriding these on :root / html[data-theme='dark'].
   Keep the names stable: they are part of the custom-CSS contract. */

:root {
    /* Brand blue: links, active states, primary buttons, focus rings. */
    --pz-accent: #007db8;
    --pz-accent-hover: #005a8a;
    /* Same colour as RGB channels, for tints: rgba(var(--pz-accent-rgb), 0.1) */
    --pz-accent-rgb: 0, 125, 184;
    /* Neutral palette of the light theme. Dark and black use --dm-* below. */
    --pz-text: #333333;            /* main text */
    --pz-text-muted: #6b7280;      /* secondary text, icons */
    --pz-text-subtle: #9ca3af;     /* placeholders, hints */
    --pz-border: #e0e0e0;          /* default borders, separators */
    --pz-border-strong: #d1d5db;   /* inputs, menus, cards */
    --pz-surface: #f8f9fa;         /* panels, cards, code backgrounds */
    --pz-surface-hover: #f3f4f6;   /* hover rows and items */
    --pz-danger: #dc3545;          /* destructive actions, errors */
    --pz-link: #2e8cfa;            /* hyperlinks in notes */
    --pz-accent-strong: #0b4da6;   /* selected note/folder title in the sidebar */
    --pz-accent-soft: #e3f2fd;     /* active item background */
    --pz-success: #28a745;         /* success alerts, enabled states */
    --pz-warning: #ffc107;         /* warning alerts, badges */
}

/* ============================================
   Dark Mode - CSS Custom Properties & Base
   ============================================ */

:root[data-theme='dark'],
body.dark-mode {
    --dm-text: #bebebe;
    --dm-text-muted: #c5c5c5;
    --dm-bg: #252526;
    --dm-content-bg: #252526;
    --dm-sidebar-bg: #252526;
    --dm-sidebar-surface: #333333;
    --dm-surface: #333333;
    --dm-surface-hover: #3a3a3a;
    --dm-border: #404040;
    --dm-border-light: #555555;
    --dm-accent: #4a9eff;
    --dm-active: #1e3a5f;
    --dm-code-bg: #262424;
    --dm-tabbar-bg: #1e1e1e;
    --dm-tab-bg: #252525;
    --dm-tab-hover-bg: #2e2e2e;
    --dm-tab-active-bg: #383838;
}

html.theme-black[data-theme='dark'],
body.black-mode {
    --dm-text: #c0c8d4;
    --dm-text-muted: #9ba6b5;
    --dm-bg: #0f1117;
    --dm-content-bg: #141821;
    --dm-sidebar-bg: #0b0d12;
    --dm-sidebar-surface: #12151c;
    --dm-surface: #171a21;
    --dm-surface-hover: #202532;
    --dm-border: #252b35;
    --dm-border-light: #394150;
    --dm-accent: #5f94f7;
    --dm-active: #15243a;
    --dm-code-bg: #090b10;
    --dm-tabbar-bg: var(--dm-sidebar-bg);
    --dm-tab-bg: var(--dm-sidebar-surface);
    --dm-tab-hover-bg: var(--dm-surface);
    --dm-tab-active-bg: var(--dm-content-bg);
}

/* Apply dark background as early as possible */
html[data-theme='dark'],
body.dark-mode {
    background-color: var(--dm-content-bg);
    color: var(--dm-text);
}

/* Prevent transition flash on initial load */
html[data-theme='dark'] *,
body.dark-mode * {
    transition: background-color 0.0s, color 0.0s, border-color 0.0s !important;
}