/* Design tokens and theme variables */
:root{
  --content-width: 880px;
  --gutter: 24px;

  /* Dark (default) */
  --bg: #0b0f14;
  /* Body background (separate override if desired) */
  --body-bg: var(--bg);
  --card: #0f1720;
  --muted: #d5dbe4;
  --accent: #d1d6e0;
  --text: #e6eef6;
  --hero-title: #f9f9f9;
  --hero-subtext: #ececec;
  --card-title: #e0e6ec;
  --tile-border: color-mix(in srgb, var(--text) 6%, transparent);

  /* Footer text color (separate control from --muted) */
  --footer-text: #e6eef6;

  /* Link colors (dark theme) */
  --link-color: #7fb3d5;
  --link-hover: #a8c9e1;

  /* Gist hover glow (dark mode) - reduced intensity */
  --gist-glow: color-mix(in srgb, var(--accent) 6%, transparent);
  --gist-glow-soft: color-mix(in srgb, var(--accent) 2.5%, transparent);

  /* Social buttons use the dark-theme accent/glow regardless of selected theme */
  --social-accent: #d1d6e0;
  --social-gist-glow: color-mix(in srgb, #d1d6e0 6%, transparent);
  --social-gist-glow-soft: color-mix(in srgb, #d1d6e0 2.5%, transparent);
  /* Social button surface and content colors (dark theme look) */
  --social-card: #0f1720;
  --social-text: #e6eef6;

  /* Glow sizing tokens (can be tuned globally) */
  --glow-ring-spread: 0.5px;      /* spread for thin ring (reduced) */
  --glow-soft-blur: 12px;         /* softer mid blur (reduced) */
  --glow-strong-blur: 8px;       /* strong outer blur (reduced) */
  --glow-strong-spread: -10px;    /* negative spread to pull outer blur in (reduced) */
  /* Popup drop shadow sizing */
  --popup-drop-offset-y: 8px;
  --popup-drop-blur: 24px;
  --popup-drop-alpha: 0.45;
}

:root[data-theme="light"]{
  --bg: hsl(210, 25%, 97%);
  /* Body background (separate override if desired) */
  --body-bg: var(--bg);
  --card: #ffffff;
  --muted: #3f444e;
  --accent: #293757;
  --text: #2c3a55;
  --hero-title: #f9f9f9;
  --hero-subtext: #ececec;
  --card-title: #242f45;
  --tile-border: color-mix(in srgb, var(--text) 67%, transparent);

  /* Gist hover glow (light mode) - reduced intensity */
  --gist-glow: color-mix(in srgb, var(--accent) 20%, transparent);
  --gist-glow-soft: color-mix(in srgb, var(--accent) 6%, transparent);

  /* Keep social buttons styled with the dark-theme accent/glow */
  --social-accent: #d1d6e0;
  --social-gist-glow: color-mix(in srgb, #d1d6e0 10%, transparent);
  --social-gist-glow-soft: color-mix(in srgb, #d1d6e0 4%, transparent);

  /* Social button surface and content colors (dark theme look) */
  --social-card: #0f1720;
  --social-text: #e6eef6;

  /* Glow sizing tokens (shared with dark theme) */
  --glow-ring-spread: 0.5px;
  --glow-soft-blur: 12px;
  --glow-strong-blur: 8px;
  --glow-strong-spread: -10px;
  --popup-drop-offset-y: 8px;
  --popup-drop-blur: 24px;
  --popup-drop-alpha: 0.45;

  /* Footer text color (separate control from --muted) */
  --footer-text: #2c3a55;

  /* Link colors (light theme) */
  --link-color: #12335e;
  --link-hover: #082041;
}