/* * Longevity Magazin — Semantic Article Theme CSS * * Defines CSS custom properties and semantic utility classes for article content. * These classes automatically switch between light and dark values based on the * presence of the "dark" class on . * * Usage: Replace hardcoded Tailwind color classes in article HTML with lm-* classes. * Example: class="text-gray-900" → class="lm-heading" * * Non-color classes (text-2xl, font-bold, rounded-lg, px-4, etc.) stay as Tailwind utilities. */ /* ============================================================ CSS CUSTOM PROPERTIES ============================================================ */ :root { /* Text */ --lm-text-heading: #0f172a; --lm-text-body: #374151; --lm-text-meta: #6b7280; --lm-text-meta-dim: #9ca3af; --lm-text-accent: #17BEBB; --lm-text-warn: #f97316; --lm-text-warn-strong: #ea580c; --lm-text-caution: #a16207; --lm-text-danger: #ef4444; --lm-text-danger-heading: #b91c1c; --lm-text-success: #16a34a; --lm-text-success-heading: #15803d; /* Backgrounds */ --lm-bg: #ffffff; --lm-bg-alt: #f9fafb; --lm-bg-muted: #e5e7eb; --lm-bg-strong: #e5e7eb; --lm-bg-accent: rgba(23, 190, 187, 0.1); --lm-bg-warn: #fefce8; --lm-bg-warn-strong: #fef9c3; --lm-bg-orange: #fff7ed; --lm-bg-danger: #fef2f2; --lm-bg-danger-strong: #fee2e2; --lm-bg-success: #f0fdf4; --lm-bg-success-strong: #dcfce7; /* Borders */ --lm-border: #e5e7eb; --lm-border-accent: #17BEBB; --lm-border-warn: #fbbf24; --lm-border-warn-dim: #fde68a; --lm-border-danger: #fecaca; --lm-border-success: #bbf7d0; /* CTA */ --lm-cta-bg: #17BEBB; --lm-cta-text: #ffffff; --lm-cta-hover-bg: #14a8a5; /* Table Headers */ --lm-thead-bg: #374151; --lm-thead-text: #ffffff; --lm-thead-border: rgba(255, 255, 255, 0.15); } .dark { /* Text */ --lm-text-heading: #e2e2e8; --lm-text-body: #b9cacb; --lm-text-meta: #849495; --lm-text-meta-dim: #6b7280; --lm-text-accent: #4cd6ff; --lm-text-warn: #fb923c; --lm-text-warn-strong: #ea580c; --lm-text-caution: #fbbf24; --lm-text-danger: #ff6b6b; --lm-text-danger-heading: #fca5a5; --lm-text-success: #00e1ab; --lm-text-success-heading: #6ee7b7; /* Backgrounds */ --lm-bg: #282a2e; --lm-bg-alt: #1e2024; --lm-bg-muted: #282a2e; --lm-bg-strong: #333539; --lm-bg-accent: rgba(76, 214, 255, 0.1); --lm-bg-warn: rgba(234, 179, 8, 0.08); --lm-bg-warn-strong: rgba(234, 179, 8, 0.12); --lm-bg-orange: rgba(255, 180, 171, 0.08); --lm-bg-danger: rgba(255, 107, 107, 0.08); --lm-bg-danger-strong: rgba(255, 107, 107, 0.15); --lm-bg-success: rgba(0, 225, 171, 0.08); --lm-bg-success-strong: rgba(0, 225, 171, 0.15); /* Borders */ --lm-border: #3b494b; --lm-border-accent: #4cd6ff; --lm-border-warn: #f59e0b; --lm-border-warn-dim: rgba(245, 158, 11, 0.3); --lm-border-danger: rgba(255, 107, 107, 0.2); --lm-border-success: rgba(0, 225, 171, 0.2); /* CTA */ --lm-cta-bg: #4cd6ff; --lm-cta-text: #001f28; --lm-cta-hover-bg: #9be4ff; /* Table Headers */ --lm-thead-bg: transparent; --lm-thead-text: #00f6bb; --lm-thead-border: rgba(0, 246, 187, 0.25); } /* ============================================================ SEMANTIC UTILITY CLASSES ============================================================ */ /* --- Text --- */ .lm-heading { color: var(--lm-text-heading); } .lm-body { color: var(--lm-text-body); } .lm-meta { color: var(--lm-text-meta); } .lm-meta-dim { color: var(--lm-text-meta-dim); } .lm-accent { color: var(--lm-text-accent); } .lm-warn { color: var(--lm-text-warn); } .lm-warn-strong { color: var(--lm-text-warn-strong); } .lm-caution { color: var(--lm-text-caution); } .lm-danger { color: var(--lm-text-danger); } .lm-danger-heading { color: var(--lm-text-danger-heading); } .lm-success { color: var(--lm-text-success); } .lm-success-heading { color: var(--lm-text-success-heading); } /* --- Backgrounds --- */ .lm-bg { background-color: var(--lm-bg); } .lm-bg-alt { background-color: var(--lm-bg-alt); } .lm-bg-muted { background-color: var(--lm-bg-muted); } /* Nav badge hover — only for links inside