/* Blog Color Scheme - Defined February 2026 */

:root {
  /* Blues */
  --color-american-sapphire: #0A1195;
  --color-american-sapphire-rgb: 10, 17, 149;
  
  --color-cerulean-blue: #2A52BE;
  --color-cerulean-blue-rgb: 42, 82, 190;
  
  --color-mariner: #2C70C6;
  --color-mariner-rgb: 44, 112, 198;
  
  /* Oranges */
  --color-dutch-orange: #FF9A00;
  --color-dutch-orange-rgb: 255, 154, 0;
  
  --color-vivid-orange: #FF8301;
  --color-vivid-orange-rgb: 255, 131, 1;
  
  --color-cadmium-orange: #FF6601;
  --color-cadmium-orange-rgb: 255, 102, 1;
  
  /* Semantic Usage */
  --color-primary: var(--color-american-sapphire);
  --color-primary-light: var(--color-mariner);
  --color-accent: var(--color-dutch-orange);
  --color-accent-bright: var(--color-vivid-orange);
}

/* Color Reference Chart for Blogs */
.blog-color-swatch {
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 4px;
  margin-right: 1em;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-american-sapphire { background-color: var(--color-american-sapphire); }
.color-cerulean-blue { background-color: var(--color-cerulean-blue); }
.color-mariner { background-color: var(--color-mariner); }
.color-dutch-orange { background-color: var(--color-dutch-orange); }
.color-vivid-orange { background-color: var(--color-vivid-orange); }
.color-cadmium-orange { background-color: var(--color-cadmium-orange); }

/* Blog Typography & Styling */
.blog-header {
  color: var(--color-american-sapphire);
  border-bottom: 4px solid var(--color-dutch-orange);
  padding-bottom: 0.5em;
}

.blog-accent {
  color: var(--color-dutch-orange);
  font-weight: 600;
}

.blog-highlight {
  background-color: rgba(var(--color-dutch-orange-rgb), 0.1);
  border-left: 4px solid var(--color-dutch-orange);
  padding-left: 1em;
  margin: 1em 0;
}

.blog-link {
  color: var(--color-cerulean-blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}

.blog-link:hover {
  border-bottom-color: var(--color-dutch-orange);
}

.blog-tag {
  display: inline-block;
  background-color: var(--color-american-sapphire);
  color: white;
  padding: 0.25em 0.75em;
  border-radius: 20px;
  font-size: 0.9em;
  margin-right: 0.5em;
  margin-bottom: 0.5em;
}

.blog-date {
  color: var(--color-mariner);
  font-size: 0.95em;
  font-style: italic;
}