/*
 * Every colour lives here as a custom property named for its role. No colour
 * literal belongs in another stylesheet or in JavaScript — the exception is the
 * mock's generated thumbnails, which draw a picture of a piece of paper rather
 * than a piece of the interface, and whose colours are the document's own.
 *
 * The light palette is defined on bare `:root` so it needs no media query to
 * apply. Dark is defined twice: under `prefers-color-scheme` guarded against an
 * explicit light choice, and under an explicit dark choice. That way first
 * paint follows the OS with no script, and an explicit choice still wins.
 */

:root {
  --page-bg: #f4f3f0;
  --panel-bg: #ffffff;
  --panel-border: #dedcd6;

  --text: #1e1d1a;
  --text-dim: #6b6963;
  --text-faint: #96948d;

  --accent: #3b5b8c;
  --accent-text: #ffffff;
  --accent-soft: #e6ecf5;

  --pill-bg: #eceae4;
  --pill-border: #d8d5cd;
  --pill-text: #2c2a26;
  --pill-count-bg: #dbd8d0;
  --pill-count-text: #55534d;

  --pill-search-bg: var(--accent);
  --pill-search-text: var(--accent-text);
  --pill-search-count-bg: rgb(255 255 255 / 0.22);
  --pill-search-count-text: #ffffff;

  --pill-not-bg: #f6e3e3;
  --pill-not-border: #e0bcbc;
  --pill-not-text: #7d3838;

  --thumb-bg: #ffffff;
  --thumb-border: #d9d7d0;
  --thumb-shadow: rgb(0 0 0 / 0.10);

  --histogram-in: #9db6da;
  --histogram-out: #dbd8d0;

  --danger: #a33c3c;
  --warn: #9a6b1f;
  --tok-label-bg: #dcd8cd;
  --tok-date-bg: #cfdcef;
  --placeholder-bg: #f0efec;
  --placeholder-line: #c6c5c0;
  --placeholder-text: #8a8985;
  --focus-ring: #6f92c9;

  /* File-type glyph colours (the unparseable-documents list, CF-DOC-010):
     one hue per broad category, not one per extension — twelve individually
     chosen colours would be noise, not signal, and the type letters inside
     each glyph already carry the specific extension. Reused nowhere else, so
     these are named for the category rather than for a role like the rest of
     this file, the same exception `--tok-label-bg`/`--tok-date-bg` already
     are for the search field's own two token kinds. */
  --filetype-document: #a33c3c;
  --filetype-spreadsheet: #3b7d4f;
  --filetype-image: #3b5b8c;
  --filetype-presentation: #9a6b1f;
  --filetype-text: #6b6396;
  --filetype-unknown: #96948d;

  --bar-width: 20rem;
  --radius: 0.5rem;

  /* Chrome drawn over a document's own picture — the viewer's backdrop, the
     thumbnail and viewer label-pill overlays, the info panel — rather than
     over the application's own surfaces. A document page is always rendered
     light (`src/mock/thumbnail.js` draws a white page in every theme,
     matching a real scanned document), so these do not vary by theme the way
     every other colour here does: legibility against a white page is the
     same question in light, dark and high-contrast alike. Named for role
     like everything else in this file — "the document is not part of the
     app's own palette" is the reason they are collected here rather than
     one being missing from the list above. */
  --on-document-scrim: rgb(0 0 0 / 0.5);
  --on-document-scrim-strong: rgb(0 0 0 / 0.7);
  --on-document-backdrop: rgb(0 0 0 / 0.66);
  --on-document-text: #ffffff;
  --on-document-pill-bg: rgb(255 255 255 / 0.85);
  --on-document-pill-text: #1a1a1a;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg: #17171a;
    --panel-bg: #1f1f23;
    --panel-border: #33333a;

    --text: #e8e7e3;
    --text-dim: #a3a19b;
    --text-faint: #75736e;

    --accent: #7ea2d8;
    --accent-text: #12121a;
    --accent-soft: #263349;

    --pill-bg: #2b2b31;
    --pill-border: #3d3d45;
    --pill-text: #ddddd8;
    --pill-count-bg: #3a3a42;
    --pill-count-text: #b0aea8;

    --pill-search-bg: var(--accent);
    --pill-search-text: #12121a;
    --pill-search-count-bg: rgb(0 0 0 / 0.25);
    --pill-search-count-text: #12121a;

    --pill-not-bg: #3a2626;
    --pill-not-border: #563636;
    --pill-not-text: #e0a5a5;

    --thumb-bg: #26262b;
    --thumb-border: #3a3a42;
    --thumb-shadow: rgb(0 0 0 / 0.4);

    --histogram-in: #5f7ba8;
    --histogram-out: #3a3a42;

    --danger: #d98080;
    --warn: #d9b063;
    --tok-label-bg: #3b3b46;
    --tok-date-bg: #2c3d55;
    --placeholder-bg: #24242a;
    --placeholder-line: #45454f;
    --placeholder-text: #8b8a86;
    --focus-ring: #7ea2d8;

    --filetype-document: #d98080;
    --filetype-spreadsheet: #7fbf94;
    --filetype-image: #7ea2d8;
    --filetype-presentation: #d9b063;
    --filetype-text: #a79fd1;
    --filetype-unknown: #75736e;
  }
}

:root[data-theme="dark"] {
  --page-bg: #17171a;
  --panel-bg: #1f1f23;
  --panel-border: #33333a;

  --text: #e8e7e3;
  --text-dim: #a3a19b;
  --text-faint: #75736e;

  --accent: #7ea2d8;
  --accent-text: #12121a;
  --accent-soft: #263349;

  --pill-bg: #2b2b31;
  --pill-border: #3d3d45;
  --pill-text: #ddddd8;
  --pill-count-bg: #3a3a42;
  --pill-count-text: #b0aea8;

  --pill-search-bg: var(--accent);
  --pill-search-text: #12121a;
  --pill-search-count-bg: rgb(0 0 0 / 0.25);
  --pill-search-count-text: #12121a;

  --pill-not-bg: #3a2626;
  --pill-not-border: #563636;
  --pill-not-text: #e0a5a5;

  --thumb-bg: #26262b;
  --thumb-border: #3a3a42;
  --thumb-shadow: rgb(0 0 0 / 0.4);

  --histogram-in: #5f7ba8;
  --histogram-out: #3a3a42;

  --danger: #d98080;
  --warn: #d9b063;
  --tok-label-bg: #3b3b46;
  --tok-date-bg: #2c3d55;
  --placeholder-bg: #24242a;
  --placeholder-line: #45454f;
  --placeholder-text: #8b8a86;
  --focus-ring: #7ea2d8;

  --filetype-document: #d98080;
  --filetype-spreadsheet: #7fbf94;
  --filetype-image: #7ea2d8;
  --filetype-presentation: #d9b063;
  --filetype-text: #a79fd1;
  --filetype-unknown: #75736e;
}

/* A fourth palette, not a variant of light or dark: pure black and white with
   saturated, high-chroma accents, chosen for contrast ratio rather than for
   matching either existing palette's mood. Structurally identical to the other
   themes — no component reads a `high-contrast` value anywhere, only these
   custom properties, per TASKS.md's "palette only" scope for this theme:
   any place that would otherwise need a heavier border or a second signal to
   read correctly is a bug in every theme, not a thing to fix by adding
   structure here (CF-LBL-025 is exactly such a fix, and it applies
   unconditionally rather than being gated on this attribute). */
:root[data-theme="high-contrast"] {
  --page-bg: #000000;
  --panel-bg: #000000;
  --panel-border: #ffffff;

  --text: #ffffff;
  --text-dim: #ffffff;
  --text-faint: #d0d0d0;

  --accent: #66b3ff;
  --accent-text: #000000;
  --accent-soft: #003366;

  --pill-bg: #000000;
  --pill-border: #ffffff;
  --pill-text: #ffffff;
  --pill-count-bg: #ffffff;
  --pill-count-text: #000000;

  --pill-search-bg: var(--accent);
  --pill-search-text: #000000;
  --pill-search-count-bg: #000000;
  --pill-search-count-text: #66b3ff;

  --pill-not-bg: #000000;
  --pill-not-border: #ff6b6b;
  --pill-not-text: #ff6b6b;

  --thumb-bg: #000000;
  --thumb-border: #ffffff;
  --thumb-shadow: rgb(255 255 255 / 0.3);

  --histogram-in: #66b3ff;
  --histogram-out: #4d4d4d;

  --danger: #ff6b6b;
  --warn: #ffd166;
  --tok-label-bg: #262626;
  --tok-date-bg: #003366;
  --placeholder-bg: #000000;
  --placeholder-line: #ffffff;
  --placeholder-text: #ffffff;
  --focus-ring: #ffd166;

  --filetype-document: #ff6b6b;
  --filetype-spreadsheet: #6bffa0;
  --filetype-image: #66b3ff;
  --filetype-presentation: #ffd166;
  --filetype-text: #c9b3ff;
  --filetype-unknown: #d0d0d0;
}