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

/* Category color mappings */
[data-category="workplace"] { --cat-color: var(--color-workplace); }
[data-category="road-safety"] { --cat-color: var(--color-road-safety); }
[data-category="health"] { --cat-color: var(--color-health); }
[data-category="construction"] { --cat-color: var(--color-construction); }
[data-category="first-aid"] { --cat-color: var(--color-first-aid); }
[data-category="wellbeing"] { --cat-color: var(--color-wellbeing); }
[data-category="food-safety"] { --cat-color: var(--color-food-safety); }

@layer brand {

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

  /* ---------- Dark mode ---------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #0e1210;
      --color-surface: #171f1a;
      --color-surface-raised: #1c261f;
      --color-text: #e4eae6;
      --color-text-muted: #9ba8a0;
      --color-text-light: #6b7d73;
      --color-border: #2a3a30;
      --color-border-light: #1f2d25;

      --color-accent: #34d068;
      --color-accent-dark: #2ab856;
      --color-accent-light: #132e1c;
      --color-accent-lighter: #0f1f14;

      --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);
    }

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

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

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

    .hero-welcome::before {
      opacity: 0.15;
    }

    .footer {
      background: #080c0a;
    }

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

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

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

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

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

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

    .newsletter__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);
    }

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

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

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

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

    .article-body pre {
      background: #080c0a;
    }

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

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

    .sidebar__network-card:hover {
      background: var(--color-accent-light);
    }

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