/**
 * Shared blog theme styles - applies dance-type colors automatically
 * Include this AFTER blog-theme.js: <link rel="stylesheet" href="blog-theme.css">
 */

/* Base palette - defaults */
:root {
  --ink: #0f172a;           /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --bg: #ffffff;
  --chip: #f1f5f9;          /* slate-100 */
  
  /* Blog-specific colors (set by blog-theme.js automatically) */
  --blog-link: #0f172a;      /* defaults to dark, overridden by JS based on dance type */
  --blog-link-hover: #1f2937;
  --blog-tag-border: #e5e7eb; /* defaults to gray, overridden by JS */
  --blog-tag-ink: #1f2937;    /* defaults to dark, overridden by JS */
  
  /* Dance-type tokens for cross-links (used in "Other Posts" sections) */
  --tango: #e11d48;
  --tango-hover: #be123c;
  --salsa: #FD7E14;
  --salsa-hover: #E8590C;
  --fusion: #0EA5B7;
  --fusion-hover: #0B8696;
  --ci: #28A745;
  --ci-hover: #218838;
  --wcs: #1E3A8A;
  --wcs-hover: #1e40af;
}

/* Navigation links use blog theme color (automatically set by JS) */
nav a {
  color: var(--blog-link) !important;
}

nav a:hover,
nav a:focus {
  color: var(--blog-link-hover) !important;
}

/* Tags use blog theme colors (automatically set by JS) */
.tag {
  color: var(--blog-tag-ink) !important;
  border-color: var(--blog-tag-border) !important;
}

/* Back link uses blog theme color (automatically set by JS) */
.back {
  color: var(--blog-link) !important;
}

.back:hover {
  color: var(--blog-link-hover) !important;
}

/* Regular links also use blog theme color */
a:not(.a-btn):not(.back-button) {
  color: var(--blog-link) !important;
}

a:not(.a-btn):not(.back-button):hover,
a:not(.a-btn):not(.back-button):focus {
  color: var(--blog-link-hover) !important;
}