/**
 * RC Debug Styles
 *
 * Debug visual feedback for focus/activation states.
 * Hidden by default - visible only when html.debug-focus is set.
 *
 * Toggle debug mode:
 *   document.documentElement.classList.add('debug-focus')
 *   document.documentElement.classList.remove('debug-focus')
 *
 * Or via RCGlobalRuntime:
 *   RC.setState('debugFocus', true)
 */

/* Debug classes - no styles by default */
.rc-debug-activated,
.rc-debug-focused,
.rc-debug-default {
    /* Hidden when debug-focus is not active */
}

/* Debug focus rings - visible when html.debug-focus is active */
html.debug-focus .rc-debug-activated {
    outline: 2px solid #22c55e !important; /* green-500 */
    outline-offset: 2px;
}

html.debug-focus .rc-debug-focused {
    outline: 2px solid #3b82f6 !important; /* blue-500 */
    outline-offset: 2px;
}

html.debug-focus .rc-debug-default {
    outline: 1px solid #6b7280 !important; /* gray-500 */
    outline-offset: 1px;
}

/* Debug layout mode - shows component boundaries */
html.debug-layout * {
    outline: 1px dashed rgba(255, 0, 0, 0.3);
}

html.debug-layout [class*="rc-"],
html.debug-layout [class*="vstack"],
html.debug-layout [class*="hstack"],
html.debug-layout [class*="zstack"] {
    outline: 1px solid rgba(255, 0, 0, 0.5);
}