/* Theme — light, dark and system.
   The light values come from industry.css; this file re-declares the *roles*
   for a dark ground. Ramps are inverted rather than replaced, so every place
   the page already asks for (say) --color-neutral-300 as a hairline border or
   --color-accent-700 as accent-coloured text keeps that meaning on either ground. */

:root {
  color-scheme: light;

  /* Paper stock for the sample reader. */
  --paper: #f5f1e6;
  --paper-base: #e9e4d8;
  --paper-ink: #2a2724;
  --paper-border: var(--color-neutral-400);
  --gutter-shade: rgba(29, 31, 32, 0.16);
  --illo-filter: none;
  --illo-blend: normal;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #17191a;
    --color-surface: #202324;
    --color-text: #eceded;
    --color-accent: #7ea6cd;
    --color-accent-2: #7ea6cd;
    --color-divider: color-mix(in srgb, #eceded 18%, transparent);

    --color-neutral-100: #1b1d1e;
    --color-neutral-200: #232628;
    --color-neutral-300: #2f3335;
    --color-neutral-400: #3e4245;
    --color-neutral-500: #5a5e61;
    --color-neutral-600: #7b7f82;
    --color-neutral-700: #9ba0a3;
    --color-neutral-800: #bcc0c3;
    --color-neutral-900: #dcdfe1;

    --color-accent-100: #17242f;
    --color-accent-200: #1e3143;
    --color-accent-300: #274157;
    --color-accent-400: #33556f;
    --color-accent-500: #4a7295;
    --color-accent-600: #6c95bd;
    --color-accent-700: #96b8d9;
    --color-accent-800: #b9d2e8;
    --color-accent-900: #dbe9f5;

    --color-accent-2-100: #17242f;
    --color-accent-2-200: #1e3143;
    --color-accent-2-300: #274157;
    --color-accent-2-400: #33556f;
    --color-accent-2-500: #4a7295;
    --color-accent-2-600: #6c95bd;
    --color-accent-2-700: #96b8d9;
    --color-accent-2-800: #b9d2e8;
    --color-accent-2-900: #dbe9f5;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62);

    /* The book reads as a night page rather than a lit sheet. */
    --paper: #202325;
    --paper-base: #191b1d;
    --paper-ink: #cfc9ba;
    --paper-border: #34383a;
    --gutter-shade: rgba(0, 0, 0, 0.5);
    --illo-filter: invert(1) hue-rotate(180deg) saturate(0.75);
  --illo-blend: lighten;
  }
}

/* Explicitly chosen dark — same values, independent of the OS setting. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #17191a;
  --color-surface: #202324;
  --color-text: #eceded;
  --color-accent: #7ea6cd;
  --color-accent-2: #7ea6cd;
  --color-divider: color-mix(in srgb, #eceded 18%, transparent);

  --color-neutral-100: #1b1d1e;
  --color-neutral-200: #232628;
  --color-neutral-300: #2f3335;
  --color-neutral-400: #3e4245;
  --color-neutral-500: #5a5e61;
  --color-neutral-600: #7b7f82;
  --color-neutral-700: #9ba0a3;
  --color-neutral-800: #bcc0c3;
  --color-neutral-900: #dcdfe1;

  --color-accent-100: #17242f;
  --color-accent-200: #1e3143;
  --color-accent-300: #274157;
  --color-accent-400: #33556f;
  --color-accent-500: #4a7295;
  --color-accent-600: #6c95bd;
  --color-accent-700: #96b8d9;
  --color-accent-800: #b9d2e8;
  --color-accent-900: #dbe9f5;

  --color-accent-2-100: #17242f;
  --color-accent-2-200: #1e3143;
  --color-accent-2-300: #274157;
  --color-accent-2-400: #33556f;
  --color-accent-2-500: #4a7295;
  --color-accent-2-600: #6c95bd;
  --color-accent-2-700: #96b8d9;
  --color-accent-2-800: #b9d2e8;
  --color-accent-2-900: #dbe9f5;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 3px 10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.62);

  --paper: #202325;
  --paper-base: #191b1d;
  --paper-ink: #cfc9ba;
  --paper-border: #34383a;
  --gutter-shade: rgba(0, 0, 0, 0.5);
  --illo-filter: invert(1) hue-rotate(180deg) saturate(0.75);
  --illo-blend: lighten;
}