/* ============================================
   DARK COLOR THEME - Deep dark gray (avoiding pure black for better readability)
   @primary: #0d1117
   @secondary: #161b22
   @text: #c9d1d9
   ============================================ */

:root[data-theme="dark"] {
    /* Background colors - Using dark gray instead of pure black for better readability */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-app: #0d1117;
    --bg-elevated: #161b22;
    --bg-hover: #21262d;
    --bg-active: #30363d;

    /* Page background gradient - first-class style token, themeable + accent-aware
       (composed from the accent + bg tokens above). Stronger glow than light. */
    --bg-gradient:
        radial-gradient(1200px 620px at 100% -10%, color-mix(in srgb, var(--accent-primary) 30%, transparent) 0%, transparent 60%),
        radial-gradient(1000px 560px at -10% 6%, color-mix(in srgb, var(--accent-primary) 18%, transparent) 0%, transparent 55%),
        linear-gradient(165deg, color-mix(in srgb, var(--accent-primary) 16%, var(--bg-app)) 0%, var(--bg-app) 46%, var(--bg-secondary) 100%);
    
    /* Text colors - Improved contrast for better visibility */
    --text-primary: #e6edf3;
    --text-secondary: #c9d1d9;
    --text-tertiary: #8b949e;
    --text-inverse: #0d1117;

    /* Role-pair ink for the warning button/badge/etc. variant — see light.css
       for the full explanation. `.xwui-button-warning`'s background
       (--accent-warning, amber ~#f59e0b) stays bright in dark mode too, but
       without this token the fg fell back to --text-primary (near-white
       here), rendering near-invisible ~1.8:1 text on the amber background.
       Caught by the style-debug color smoke test. */
    --role-warning-fg: #3d2e00;
    /* Same reasoning as --role-warning-fg above, for the success role — see
       light.css. --accent-success (emerald ~#10b981) stays bright in dark
       mode too; white text only reaches ~2.5:1 against it. */
    --role-success-fg: #052e16;
    /* Role-pair ink for the primary/info button variants — see light.css.
       --accent-primary (indigo ~#4f46e5) is theme-independent (accent
       layer) and stays dark enough in BOTH themes to need fixed white ink;
       without this it fell back to --text-inverse, which is near-black
       HERE in dark theme — idle was already only ~3.0:1 (the WCAG floor),
       and :hover's darker --accent-hover (~#4338ca) pushed it to ~2.4:1.
       Found by the interactive-state color smoke test sweep. */
    --role-primary-fg: #ffffff;
    --role-info-fg: #ffffff;

    /* Border colors */
    --border-color: rgba(255, 255, 255, 0.05);
    --border-light: rgba(255, 255, 255, 0.03);
    --border-medium: rgba(255, 255, 255, 0.05);
    --border-strong: rgba(255, 255, 255, 0.08);
    
    /* Control colors - Improved contrast */
    --control-bg: #161b22;
    --control-bg-hover: #21262d;
    --control-bg-active: #30363d;
    --control-border: #30363d;
    --control-text: #e6edf3;
    --control-text-secondary: #c9d1d9;
    --control-active: #58a6ff;
    
    /* Status colors for XWUIItem */
    --status-before-start: #fbbf24;
    --status-before-start-border: #f59e0b;
    --status-before-start-hover: #f59e0b;
    --status-processing: #60a5fa;
    --status-processing-border: #3b82f6;
    --status-processing-hover: #3b82f6;
    --status-processing-text: #ffffff;
    --status-error: #f87171;
    --status-error-border: #ef4444;
    --status-error-hover: #ef4444;
    --status-error-text: #ffffff;
    
    /* Component backgrounds - Unified */
    --bg-menu: var(--bg-elevated);
    --bg-user-info: var(--bg-elevated);
    --bg-assistant: var(--bg-elevated);
    --bg-view: var(--bg-elevated);
    --bg-console: var(--bg-elevated);
    --bg-header: var(--bg-elevated);
    --bg-view-controls: var(--bg-secondary);
    
    /* Skeleton loader color - lighter for better visibility on dark background */
    --skeleton-bg: #3a3a3a;

    /* Ops broadcast semantic tokens — purple/pink branding + accent-fg */
    --text-on-accent: #ffffff;
    --color-purple: #a78bfa;
    --color-purple-bg: rgba(167, 139, 250, 0.15);
    --color-purple-text: #c4b5fd;
    --color-pink: #f472b6;
}