/*
  Notesweb design tokens
  ----------------------
  Components use var(--nw-*) only. Never hardcode colors in app.css.

  Adding a color scheme:
    1. Copy a [data-theme="..."] block below and rename it (e.g. sepia).
    2. Add the name to allowedThemes in handlers/uiprefs.go.
    3. Add the name to NWPrefs.themes in static/js/prefs.js.
*/

:root {
  --nw-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --nw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nw-font-size: 14px;
  --nw-line-height: 1.4;
  --nw-topbar-height: 40px;
  --nw-sidebar-width: 220px;
  --nw-sidebar-rail: 48px;
  --nw-row-height: 36px;
  --nw-radius: 2px;
  --nw-radius-input: 4px;
  --nw-icon-size: 16px;
  --nw-control-height: 32px;
  --nw-control-height-sm: 28px;
  --nw-icon-btn-size: 32px;
  --nw-search-height: 28px;
  --nw-title-size: 20px;
  --nw-brand-size: 15px;
  --nw-muted-size: 12px;
  --nw-content-font-size: 14px;
  --nw-content-line-height: 1.5;
  --nw-focus-ring: 0 0 0 2px var(--nw-accent);
}

/*
  Comfort scale for phones, tablets, and iPad Pro (any orientation).
  max-width: 1024px covers iPad mini and iPad Pro portrait.
  pointer: coarse covers iPad Pro landscape (~1366px) without enlarging
  a mouse-driven desktop monitor at the same width.
  The hamburger / hide-sidebar layout still uses max-width: 768px in app.css.
*/
@media (max-width: 1024px), (pointer: coarse) {
  :root {
    --nw-font-size: 16px;
    --nw-line-height: 1.45;
    --nw-topbar-height: 48px;
    --nw-sidebar-width: 240px;
    --nw-sidebar-rail: 56px;
    --nw-row-height: 52px;
    --nw-icon-size: 20px;
    --nw-control-height: 40px;
    --nw-control-height-sm: 36px;
    --nw-icon-btn-size: 44px;
    --nw-search-height: 36px;
    --nw-title-size: 22px;
    --nw-brand-size: 17px;
    --nw-muted-size: 13px;
    --nw-content-font-size: 17px;
    --nw-content-line-height: 1.65;
  }
}

/* Default / light */
:root,
[data-theme="light"] {
  --nw-topbar-bg: #ffffff;
  --nw-sidebar-bg: #f3f2f1;
  --nw-content-bg: #ffffff;
  --nw-surface: #ffffff;
  --nw-surface-alt: #faf9f8;
  --nw-border: #e1dfdd;
  --nw-text: #242424;
  --nw-text-muted: #605e5c;
  --nw-icon: #605e5c;
  --nw-nav-hover-bg: #edebe9;
  --nw-nav-active-bg: #e1dfdd;
  --nw-row-hover-bg: #f3f2f1;
  --nw-row-selected-bg: #deecf9;
  --nw-row-selected-fg: #242424;
  --nw-search-bg: #ffffff;
  --nw-search-border: #8a8886;
  --nw-accent: #0078d4;
  --nw-accent-hover: #106ebe;
  --nw-star: #e6ac00;
  --nw-accent-fg: #ffffff;
  --nw-danger: #a4262c;
  --nw-danger-hover: #8a1e24;
  --nw-danger-fg: #ffffff;
  --nw-success-bg: #dff6dd;
  --nw-success-fg: #0e700e;
  --nw-success-border: #9fd89f;
  --nw-error-bg: #fde7e9;
  --nw-error-fg: #a4262c;
  --nw-error-border: #f1bbbc;
  --nw-warning-bg: #fff4ce;
  --nw-warning-fg: #6c5700;
  --nw-warning-border: #f2e3a3;
  --nw-info-bg: #deecf9;
  --nw-info-fg: #004578;
  --nw-info-border: #b3d6f2;
  --nw-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  --nw-code-bg: #f3f2f1;
}

[data-theme="dark"] {
  --nw-topbar-bg: #1b1b1b;
  --nw-sidebar-bg: #292827;
  --nw-content-bg: #1b1b1b;
  --nw-surface: #252423;
  --nw-surface-alt: #323130;
  --nw-border: #3b3a39;
  --nw-text: #f3f2f1;
  --nw-text-muted: #a19f9d;
  --nw-icon: #a19f9d;
  --nw-nav-hover-bg: #323130;
  --nw-nav-active-bg: #323130;
  --nw-row-hover-bg: #252423;
  --nw-row-selected-bg: #0c3d67;
  --nw-row-selected-fg: #f3f2f1;
  --nw-search-bg: #252423;
  --nw-search-border: #605e5c;
  --nw-accent: #2899f5;
  --nw-accent-hover: #3aa0f3;
  --nw-star: #f5c518;
  --nw-accent-fg: #0b0b0b;
  --nw-danger: #d13438;
  --nw-danger-hover: #e7484c;
  --nw-danger-fg: #ffffff;
  --nw-success-bg: #1a3d1a;
  --nw-success-fg: #9fd89f;
  --nw-success-border: #2d5a2d;
  --nw-error-bg: #3d1a1c;
  --nw-error-fg: #f1bbbc;
  --nw-error-border: #6b2a2e;
  --nw-warning-bg: #3d3414;
  --nw-warning-fg: #f2e3a3;
  --nw-warning-border: #6b5a1e;
  --nw-info-bg: #0c3d67;
  --nw-info-fg: #b3d6f2;
  --nw-info-border: #145a8c;
  --nw-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --nw-code-bg: #252423;
}

/*
  Print is theme-independent: white paper, near-black type.
  Browsers often drop backgrounds, so dark-theme light text would
  otherwise print faint on white.
*/
@media print {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --nw-topbar-bg: #ffffff;
    --nw-sidebar-bg: #ffffff;
    --nw-content-bg: #ffffff;
    --nw-surface: #ffffff;
    --nw-surface-alt: #ffffff;
    --nw-text: #141414;
    --nw-text-muted: #242424;
    --nw-icon: #141414;
    --nw-accent: #141414;
    --nw-accent-fg: #ffffff;
    --nw-star: #c9a000;
    --nw-code-bg: #f3f2f1;
    --nw-border: #d0d0d0;
  }

  html {
    color-adjust: exact;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}