/* Standardized CSS Color Variables
   Single source of truth for all color definitions across the application.
   Dark theme palette — NO white backgrounds anywhere.
   Last updated: 2026-04-13
   */

:root {
    /* ═══ Background Layers ═══ */
    --bg-body: #0B0F0F;
    --bg-surface: #111616;
    --bg-surface-hover: #1A2020;
    --bg-elevated: #1E2424;
    --bg-input: #151A1A;

    /* ═══ Borders ═══ */
    --border-default: #1E2828;
    --border-subtle: #162020;
    --border-focus: #4ADE80;

    /* ═══ Text ═══ */
    --text-primary: #F0F0F0;
    --text-secondary: #9CA3AF;
    --text-tertiary: #6B7280;
    --text-disabled: #4B5563;

    /* ═══ Brand / Accent ═══ */
    --accent-primary: #4ADE80;
    --accent-hover: #22C55E;
    --accent-subtle: rgba(74,222,128,0.1);

    /* ═══ Status Colors ═══ */
    --status-success: #4ADE80;
    --status-warning: #FBBF24;
    --status-error: #EF4444;
    --status-info: #60A5FA;

    /* ═══ Stat Card Accent Stripes ═══ */
    --stat-visitors: #4ADE80;
    --stat-articles: #60A5FA;
    --stat-ai-visibility: #A78BFA;
    --stat-revenue: #FBBF24;

    /* ═══ Legacy Aliases (backward compat) ═══ */
    --bg-primary: #0B0F0F;
    --bg-secondary: #111616;

    --black: #0B0F0F;
    --white: #F0F0F0;
    --green: #4ADE80;
    --green-dim: #22C55E;
    --green-glow: rgba(74,222,128,0.1);
    --green-glow-strong: rgba(74,222,128,0.25);
    --red: #EF4444;
    --blue: #60A5FA;
    --yellow: #FBBF24;

    /* Grayscale - mapped to new palette */
    --gray-950: #0B0F0F;
    --gray-900: #111616;
    --gray-850: #151A1A;
    --gray-800: #1A2020;
    --gray-700: #1E2828;
    --gray-600: #162020;
    --gray-500: #6B7280;
    --gray-400: #9CA3AF;
    --gray-300: #9CA3AF;
    --gray-200: #F0F0F0;

    /* Status aliases */
    --error: #EF4444;
    --warning: #FBBF24;
    --success: #4ADE80;
    --info: #60A5FA;

    /* Accent aliases */
    --accent: #4ADE80;
    --accent-dim: #22C55E;
    --accent-glow: rgba(74,222,128,0.1);
    --accent-glow-strong: rgba(74,222,128,0.25);
}

/* ═══════════════════════════════════════════════════════════
   Jargon Tooltips
   Usage: <span class="jargon" data-tooltip="Definition here">Term</span>
   Shows a dotted underline; hovering reveals a dark tooltip.
   ═══════════════════════════════════════════════════════════ */
.jargon {
    border-bottom: 1px dotted currentColor;
    cursor: help;
    position: relative;
    white-space: nowrap;
    display: inline;
}

.jargon::after {
    content: attr(data-tooltip);
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1E2424;
    color: #F0F0F0;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    max-width: 280px;
    width: max-content;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #1E2828;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    pointer-events: none;
    white-space: normal;
    text-align: left;
}

.jargon:hover::after,
.jargon:focus::after {
    display: block;
}