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

@layer brand {

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

  /* ---------- Dark mode ---------- */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-bg: #0f1117;
      --color-surface: #1a1c25;
      --color-surface-raised: #22242e;
      --color-text: #e8eaed;
      --color-text-muted: #9aa0ab;
      --color-text-light: #6b7280;
      --color-border: #2d303a;
      --color-border-light: #23252f;

      --color-accent: #3aa5f0;
      --color-accent-dark: #1b93df;
      --color-accent-light: rgba(58, 165, 240, 0.12);

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.15);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
    }

    .nav {
      background: rgba(15, 17, 23, 0.95);
      border-bottom-color: var(--color-border);
    }

    .footer {
      background: #080a0e;
    }

    .card__title a {
      color: var(--color-text);
    }

    .search-overlay {
      background: rgba(0, 0, 0, 0.75);
    }

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

    .network-cta {
      background: linear-gradient(135deg, rgba(58, 165, 240, 0.08) 0%, rgba(58, 165, 240, 0.03) 100%);
      border-color: rgba(58, 165, 240, 0.15);
    }

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

    img {
      filter: brightness(0.92);
    }
  }

  /* ---------- Category accent colors as data attributes ---------- */
  [data-category="learners"] { --cat-color: var(--color-learners); }
  [data-category="edt"] { --cat-color: var(--color-edt); }
  [data-category="blog"] { --cat-color: var(--color-blog); }
  [data-category="car-news"] { --cat-color: var(--color-car-news); }
  [data-category="road-safety"] { --cat-color: var(--color-road-safety); }
  [data-category="road-trips"] { --cat-color: var(--color-road-trips); }
  [data-category="electric-green"] { --cat-color: var(--color-electric-green); }

  /* ---------- Visually hidden (a11y) ---------- */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}