/* Shared UI design tokens for the three app pages (index, editor, settings).

   These were copy-pasted into each page's <style> and had drifted: the editor carried
   --accent:#2563eb / --accent2:#1d4ed8 — a generic blue it was built with as a standalone
   app, never NVISO's — while the library and settings pages used the real brand colours.
   Settings had also picked up a different --warn. One definition, brand values, no drift.

   This is the APP CHROME palette (toolbars, cards, buttons, modals). It is deliberately
   separate from skill/brand/*.css, which styles the SLIDES themselves and ships inside
   every deck; the two must not be merged — one is our tool, the other is the product.

   Brand reference: NVISO Blue #0077c8 is the primary colour, #00456d the dark companion
   (skill/brand/tokens.css, skill/README.md § palette).

   Page-specific tokens stay in the page. The editor adds --canvas (the pasteboard behind
   the slide) because only the editor has one. */

:root {
  --bg:      #eef1f5;
  --panel:   #ffffff;
  --panel2:  #f4f6f9;
  --line:    #e3e7ee;
  --text:    #1f2633;
  --muted:   #6b7480;
  --accent:  #0077C8;   /* NVISO Blue */
  --accent2: #00456D;   /* NVISO Dark Blue */
  --danger:  #dc3545;
  --ok:      #16a34a;
  --warn:    #d97706;
  --shadow:    0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.05);
  --shadow-lg: 0 14px 38px rgba(16,24,40,.18);
  --radius:  12px;
}

/* The NVISO wordmark in a page header. The dark-mode lift is needed because the logo is
   a dark-blue PNG with no light variant. */
.brandlogo { height: 24px; width: auto; display: block; }
body[data-theme="dark"] .brandlogo { filter: brightness(1.6); }

/* Dark mode is opt-in per page: the page sets body[data-theme="dark"] from the shared
   localStorage key "deckEditorTheme". The accents lighten here because #0077C8 does not
   carry enough contrast on a dark panel. */
body[data-theme="dark"] {
  --bg:      #1e1f26;
  --panel:   #2a2c36;
  --panel2:  #22232b;
  --line:    #3a3d4a;
  --text:    #e8e9ee;
  --muted:   #9aa0b0;
  --accent:  #4f8cff;
  --accent2: #3a6fd8;
  --danger:  #ff5c6c;
  --ok:      #37c97f;
  --warn:    #f5b94d;
  --shadow:    0 1px 3px rgba(0,0,0,.45);
  --shadow-lg: 0 14px 38px rgba(0,0,0,.55);
}