/* ==========================================================================
   theme.css — Brand layer: light/dark mode, category accents
   ========================================================================== */

/* Category colours come inline from categories.json (cat.color) in the templates,
   so no static [data-category] map is needed for the Business2000 category set. */

@layer brand {

  /* ---------- Light mode (default) ---------- */
  :root {
    color-scheme: light dark;
  }

  /* ---------- Dark mode ---------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #12100d;
      --color-surface: #1c1813;
      --color-surface-raised: #241f18;
      --color-text: #ece7df;
      --color-text-muted: #a89f92;
      --color-text-light: #7a7060;
      --color-border: #352d22;
      --color-border-light: #241f18;

      --color-accent: #f0b45e;
      --color-accent-dark: #d99a3f;
      --color-accent-light: #2e2415;
      --color-accent-lighter: #1f1810;

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
      --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
      --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.4);
    }

    body {
      background: var(--color-bg);
      color: var(--color-text);
    }

    .masthead {
      background: rgba(18, 16, 13, 0.95);
      border-bottom-color: var(--color-border-light);
    }

    .intro {
      background: linear-gradient(165deg, var(--color-accent-lighter) 0%, var(--color-bg) 50%);
    }

    .intro::before {
      opacity: 0.15;
    }

    .colophon {
      background: #0a0806;
    }

    .topic-tile {
      background: var(--color-surface);
      border-color: var(--color-border-light);
    }

    .topic-tile:hover {
      border-color: var(--color-border);
    }

    .feature {
      background: var(--color-surface);
      border-color: var(--color-border-light);
    }

    .feature:hover {
      border-color: var(--color-border);
    }

    .signup {
      background: var(--color-surface);
    }

    .signup--hero {
      background: var(--color-accent-dark);
    }

    .signup__input {
      background: var(--color-bg);
      border-color: var(--color-border);
      color: var(--color-text);
    }

    .about__category {
      background: var(--color-surface);
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      background: var(--color-surface);
      border-color: var(--color-border);
      color: var(--color-text);
    }

    .navpanel {
      background: var(--color-surface);
    }

    .navpanel__close {
      background: var(--color-bg);
    }

    .finder__inner {
      background: var(--color-surface);
    }

    .finder__close {
      background: var(--color-bg);
    }

    .entrycopy pre {
      background: #0a0806;
    }

    .crosslink {
      background: var(--color-accent-lighter);
      border-color: var(--color-border);
    }

    .rail__network-tile {
      background: var(--color-surface);
    }

    .rail__network-tile:hover {
      background: var(--color-accent-light);
    }

    .share__btn {
      border-color: var(--color-border);
    }

    /* ---------- Editorial homepage (dark) ---------- */
    .pill {
      background: var(--color-surface);
      border-color: var(--color-border-light);
    }

    .pill:hover {
      border-color: var(--pill-color);
    }

    .splash__main-media,
    .splash__sec-thumb,
    .lede__image,
    .brief__thumb {
      background: var(--color-surface);
    }

    .splash__secondary,
    .splash__sec,
    .wire-row,
    .brief {
      border-color: var(--color-border-light);
    }
  }
}