/* ═══════════════════════════════════════
   Accent Palette — configurable dominant color
   ═══════════════════════════════════════ */

:root {
    /* ── Base accent (banana/lime) ── */
    --accent: #d4ff26;
    --accent-rgb: 212, 255, 38;
    --accent-hover: #c8f220;

    /* ── Derived (use --accent-rgb so JS can override just the base) ── */
    --accent-muted: rgba(var(--accent-rgb), 0.55);
    --accent-subtle: rgba(var(--accent-rgb), 0.08);
    --accent-subtle-2: rgba(var(--accent-rgb), 0.14);
    --accent-border: rgba(var(--accent-rgb), 0.25);
    --accent-border-strong: rgba(var(--accent-rgb), 0.4);
    --accent-border-vivid: rgba(var(--accent-rgb), 0.58);
    --accent-glow: rgba(var(--accent-rgb), 0.6);
    --accent-focus: #FFD700;
    --accent-focus-ring: rgba(var(--accent-rgb), 0.5);

    /* ── Rail indicator ── */
    --accent-indicator-bg: #0e0e10;
}

html.light {
    --accent: #4a8500;
    --accent-rgb: 74, 133, 0;
    --accent-hover: #3d7200;
    --accent-muted: #5a8a00;
    --accent-indicator-bg: #e0e0e4;
}