/* Glossary ShortLex Color Coding
 * Each category gets a base color, subcategories get gradients
 * Gradient: Lighter/brighter = higher in list (higher weight)
 *           Darker = lower in list (lower weight)
 */

/* Category Base Colors */
:root {
  --color-a-base: #3b82f6;  /* Blue - Physics/Axioms */
  --color-b-base: #ef4444;  /* Red - Problems/Violations */
  --color-c-base: #10b981;  /* Green - Solutions/Architecture */
  --color-d-base: #f59e0b;  /* Orange - Mechanisms/Implementation */
  --color-e-base: #8b5cf6;  /* Purple - Proofs/Evidence */
  --color-f-base: #eab308;  /* Gold - Economics/Value */
  --color-g-base: #06b6d4;  /* Cyan - Strategy/Migration */
}

/* Category Headers (Length 1: A, B, C, D, E, F, G) */
a[href="#alpha-a"] {
  color: var(--color-a-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-b"] {
  color: var(--color-b-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-c"] {
  color: var(--color-c-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-d"] {
  color: var(--color-d-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-e"] {
  color: var(--color-e-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-f"] {
  color: var(--color-f-base);
  font-weight: 700;
  text-decoration: none;
}

a[href="#alpha-g"] {
  color: var(--color-g-base);
  font-weight: 700;
  text-decoration: none;
}

/* Gradient Generator for Subcategories
 * Position 1 (highest weight) = 100% brightness
 * Position N (lowest weight) = 60% brightness
 * Creates visual hierarchy showing importance
 */

/* A Category - Axioms & Physics (Blue gradient) */
a[href^="#a1-"] { color: hsl(217, 91%, 70%); } /* Lightest */
a[href^="#a2-"] { color: hsl(217, 91%, 65%); }
a[href^="#a3-"] { color: hsl(217, 91%, 60%); }
a[href^="#a4-"] { color: hsl(217, 91%, 55%); }
a[href^="#a5-"] { color: hsl(217, 91%, 50%); }
a[href^="#a6-"] { color: hsl(217, 91%, 45%); } /* Darkest */

/* B Category - Problems & Violations (Red gradient) */
a[href^="#b1-"] { color: hsl(0, 84%, 70%); }
a[href^="#b2-"] { color: hsl(0, 84%, 65%); }
a[href^="#b3-"] { color: hsl(0, 84%, 60%); }
a[href^="#b4-"] { color: hsl(0, 84%, 55%); }
a[href^="#b5-"] { color: hsl(0, 84%, 50%); }
a[href^="#b6-"] { color: hsl(0, 84%, 48%); }
a[href^="#b7-"] { color: hsl(0, 84%, 45%); }

/* C Category - Solutions & Architecture (Green gradient) */
a[href^="#c1-"] { color: hsl(160, 84%, 50%); }
a[href^="#c2-"] { color: hsl(160, 84%, 46%); }
a[href^="#c3-"] { color: hsl(160, 84%, 42%); }
a[href^="#c4-"] { color: hsl(160, 84%, 38%); }
a[href^="#c5-"] { color: hsl(160, 84%, 35%); }
a[href^="#c6-"] { color: hsl(160, 84%, 32%); }

/* D Category - Mechanisms & Implementation (Orange gradient) */
a[href^="#d1-"] { color: hsl(38, 92%, 60%); }
a[href^="#d2-"] { color: hsl(38, 92%, 55%); }
a[href^="#d3-"] { color: hsl(38, 92%, 50%); }
a[href^="#d4-"] { color: hsl(38, 92%, 47%); }
a[href^="#d5-"] { color: hsl(38, 92%, 44%); }
a[href^="#d6-"] { color: hsl(38, 92%, 41%); }

/* E Category - Proofs & Evidence (Purple gradient) */
a[href^="#e1-"] { color: hsl(258, 90%, 70%); }
a[href^="#e2-"] { color: hsl(258, 90%, 67%); }
a[href^="#e3-"] { color: hsl(258, 90%, 64%); }
a[href^="#e4-"] { color: hsl(258, 90%, 61%); }
a[href^="#e5-"] { color: hsl(258, 90%, 58%); }
a[href^="#e6-"] { color: hsl(258, 90%, 55%); }
a[href^="#e7-"] { color: hsl(258, 90%, 52%); }
a[href^="#e8-"] { color: hsl(258, 90%, 49%); }
a[href^="#e9-"] { color: hsl(258, 90%, 46%); }

/* F Category - Economics & Value (Gold gradient) */
a[href^="#f1-"] { color: hsl(48, 96%, 60%); }
a[href^="#f2-"] { color: hsl(48, 96%, 55%); }
a[href^="#f3-"] { color: hsl(48, 96%, 50%); }
a[href^="#f4-"] { color: hsl(48, 96%, 47%); }
a[href^="#f5-"] { color: hsl(48, 96%, 44%); }
a[href^="#f6-"] { color: hsl(48, 96%, 41%); }

/* G Category - Strategy & Migration (Cyan gradient) */
a[href^="#g1-"] { color: hsl(188, 95%, 55%); }
a[href^="#g2-"] { color: hsl(188, 95%, 50%); }
a[href^="#g3-"] { color: hsl(188, 95%, 46%); }
a[href^="#g4-"] { color: hsl(188, 95%, 42%); }
a[href^="#g5-"] { color: hsl(188, 95%, 38%); }
a[href^="#g6-"] { color: hsl(188, 95%, 35%); }

/* Sub-subcategories (Length 3: A2a, A2b, E10, E4a, E5a, E5b)
 * Even darker shades to show they're nested deeper
 */
a[href^="#a2a-"], a[href^="#a2b-"] {
  color: hsl(217, 91%, 40%);
  font-style: italic;
}

a[href^="#e10-"], a[href^="#e4a-"], a[href^="#e5a-"], a[href^="#e5b-"] {
  color: hsl(258, 90%, 40%);
  font-style: italic;
}

/* Hover effects - brighten on hover */
a[href^="#a"]:hover { filter: brightness(1.2); }
a[href^="#b"]:hover { filter: brightness(1.2); }
a[href^="#c"]:hover { filter: brightness(1.2); }
a[href^="#d"]:hover { filter: brightness(1.2); }
a[href^="#e"]:hover { filter: brightness(1.2); }
a[href^="#f"]:hover { filter: brightness(1.2); }
a[href^="#g"]:hover { filter: brightness(1.2); }

/* Visual weight indicators for Length headers */
h3:has(+ ul li a[href^="#a"]) {
  border-left: 4px solid var(--color-a-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#b"]) {
  border-left: 4px solid var(--color-b-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#c"]) {
  border-left: 4px solid var(--color-c-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#d"]) {
  border-left: 4px solid var(--color-d-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#e"]) {
  border-left: 4px solid var(--color-e-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#f"]) {
  border-left: 4px solid var(--color-f-base);
  padding-left: 1rem;
}

h3:has(+ ul li a[href^="#g"]) {
  border-left: 4px solid var(--color-g-base);
  padding-left: 1rem;
}

/* Emoji color matching (optional enhancement) */
.emoji-a { color: var(--color-a-base); }
.emoji-b { color: var(--color-b-base); }
.emoji-c { color: var(--color-c-base); }
.emoji-d { color: var(--color-d-base); }
.emoji-e { color: var(--color-e-base); }
.emoji-f { color: var(--color-f-base); }
.emoji-g { color: var(--color-g-base); }

/* ===================================================================
 * CATEGORY COLOR BLOCKS WITH EMOJIS
 * Pattern: [A🌌🔵] Label or [A1📡🔵] Sublabel
 * These styles create colored gradient blocks for category labels
 * =================================================================== */

/* Base category block styling */
.category-block {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  margin: 4px 0;
  font-weight: 600;
  font-size: 1.05em;
  border-left: 4px solid;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s ease;
}

.category-block:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Category-specific colored blocks */
.category-a-block {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
  border-left-color: var(--color-a-base);
  color: #93c5fd;
}

.category-b-block {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
  border-left-color: var(--color-b-base);
  color: #fca5a5;
}

.category-c-block {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.1));
  border-left-color: var(--color-c-base);
  color: #6ee7b7;
}

.category-d-block {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
  border-left-color: var(--color-d-base);
  color: #fcd34d;
}

.category-e-block {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(139, 92, 246, 0.1));
  border-left-color: var(--color-e-base);
  color: #c4b5fd;
}

.category-f-block {
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(234, 179, 8, 0.1));
  border-left-color: var(--color-f-base);
  color: #fde047;
}

.category-g-block {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(6, 182, 212, 0.1));
  border-left-color: var(--color-g-base);
  color: #67e8f9;
}

/* H Category - Measurement Units (Black/Gray) */
.category-h-block {
  background: linear-gradient(135deg, rgba(31, 41, 55, 0.3), rgba(31, 41, 55, 0.2));
  border-left-color: #4b5563;
  color: #d1d5db;
}

/* I Category - Unmitigated Goods (White/Light) */
.category-i-block {
  background: linear-gradient(135deg, rgba(243, 244, 246, 0.15), rgba(243, 244, 246, 0.08));
  border-left-color: #e5e7eb;
  color: #f3f4f6;
}

/* V Category - Cultural Proofs (Pink) */
.category-v-block {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(236, 72, 153, 0.1));
  border-left-color: #ec4899;
  color: #f9a8d4;
}

/* Inline category badges (for use in running text) */
code.category-badge {
  font-family: 'SF Mono', 'Monaco', 'Courier New', monospace;
  font-size: 0.9em;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
}

code.category-badge.cat-a {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--color-a-base);
  color: #93c5fd;
}

code.category-badge.cat-b {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--color-b-base);
  color: #fca5a5;
}

code.category-badge.cat-c {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--color-c-base);
  color: #6ee7b7;
}

code.category-badge.cat-d {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--color-d-base);
  color: #fcd34d;
}

code.category-badge.cat-e {
  background: rgba(139, 92, 246, 0.15);
  border-color: var(--color-e-base);
  color: #c4b5fd;
}

code.category-badge.cat-f {
  background: rgba(234, 179, 8, 0.15);
  border-color: var(--color-f-base);
  color: #fde047;
}

code.category-badge.cat-g {
  background: rgba(6, 182, 212, 0.15);
  border-color: var(--color-g-base);
  color: #67e8f9;
}

code.category-badge.cat-h {
  background: rgba(31, 41, 55, 0.2);
  border-color: #4b5563;
  color: #d1d5db;
}

code.category-badge.cat-i {
  background: rgba(243, 244, 246, 0.1);
  border-color: #e5e7eb;
  color: #f3f4f6;
}

code.category-badge.cat-v {
  background: rgba(236, 72, 153, 0.15);
  border-color: #ec4899;
  color: #f9a8d4;
}