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

:root {
    color-scheme: dark;

    /* ── 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);
    --accent-strong: var(--accent-hover);
    --accent-contrast: #0a0a0a;

    /* ── Theme tone tokens ── */
    --ui-bg: hsl(230 8% 0%);
    --ui-surface-1: hsl(230 7% 3%);
    --ui-surface-2: hsl(230 7% 5%);
    --ui-surface-3: hsl(230 7% 7%);
    --ui-text-1: hsl(220 20% 86%);
    --ui-text-2: hsl(220 12% 63%);
    --ui-text-3: hsl(220 10% 48%);
    --ui-explorer-title: hsl(220 16% 74%);
    --ui-explorer-text: hsl(220 14% 65%);
    --ui-explorer-muted: hsl(220 10% 53%);
    --ui-panel-bg: hsl(230 7% 0%);
    --ui-panel-rail-bg: hsl(230 7% 2%);
    --ui-panel-elevated-bg: hsl(230 7% 3%);
    --ui-card-bg: hsl(230 7% 3%);
    --ui-card-hover-bg: hsl(230 7% 6%);
    --ui-card-media-bg: hsl(230 7% 4%);
    --ui-border: rgba(255, 255, 255, 0.10);
    --ui-border-strong: rgba(255, 255, 255, 0.16);
    --ui-hover: rgba(255, 255, 255, 0.06);
    --ui-active: rgba(var(--accent-rgb), 0.17);
    --ui-shadow: 0 16px 44px rgba(0, 0, 0, 0.46);
    --ui-input-bg: hsl(230 7% 4%);
    --ui-focus-ring: rgba(var(--accent-rgb), 0.48);
    --ui-theme-lightness: 0;
    --ui-theme-contrast: 50;

    /* Legacy aliases used by feature CSS. */
    --text: var(--ui-text-1);
    --text-muted: var(--ui-text-2);
    --border: var(--ui-border);
    --panel-bg: var(--ui-surface-1);
    --panel-bg-elev: var(--ui-surface-2);

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

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