/* ============================================================
   THEME — borrowed from fizaankhan.com so the blog feels like
   the same house. Every colour lives here, as the same
   greyscale palette. Tweak these variables to re-skin.

   Light/dark: light by default; a visitor's explicit dark
   toggle is remembered via localStorage (see the bootstrap at
   the end of js/config.js). The OS preference is intentionally
   not followed.

   The font is set in js/config.js (the `font` field) — loaded
   from Google Fonts automatically; the stack below is only the
   fallback.
   ============================================================ */

:root {
  /* -- greyscale palette, light to dark -- */
  --grey-50:  #fafafa;
  --grey-100: #f0f0f0;
  --grey-200: #e0e0e0;
  --grey-300: #c4c4c4;
  --grey-400: #9c9c9c;
  --grey-500: #6e6e6e;
  --grey-600: #4b4b4b;
  --grey-700: #2e2e2e;
  --grey-800: #1c1c1c;
  --grey-900: #111111;

  /* -- semantic roles (LIGHT THEME) -- */
  --bg:          var(--grey-50);
  --surface:     #ffffff;
  --text:        var(--grey-900);
  --text-muted:  var(--grey-500);
  --border:      var(--grey-200);
  --accent:      var(--grey-800);
  --accent-text: var(--grey-50);

  /* -- typography -- */
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* -- semantic roles (DARK THEME) — same greys, inverted -- */
:root[data-theme="dark"] {
  --bg:          var(--grey-900);
  --surface:     var(--grey-800);
  --text:        var(--grey-100);
  --text-muted:  var(--grey-400);
  --border:      var(--grey-700);
  --accent:      var(--grey-100);
  --accent-text: var(--grey-900);
}