/* GPC Scratch Theme Variables */
/* Centralized theming using CSS custom properties mapped to Tailwind tokens */

:root {
    /* Surface colors */
    --color-surface: theme('colors.white');
    --color-surface-secondary: theme('colors.slate.50');
    --color-surface-tertiary: theme('colors.slate.100');
    
    /* Background */
    --color-background: theme('colors.slate.50');
    --color-background-elevated: theme('colors.white');
    
    /* Text */
    --color-text: theme('colors.slate.900');
    --color-text-secondary: theme('colors.slate.600');
    --color-text-muted: theme('colors.slate.400');
    --color-text-inverted: theme('colors.white');
    
    /* Border */
    --color-border: theme('colors.slate.200');
    --color-border-focus: theme('colors.primary.500');
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    
    /* Blockly Theme */
    --blockly-workspace-bg: #f8fafc;
    --blockly-grid-color: #e2e8f0;
    --blockly-flyout-bg: #ffffff;
    --blockly-scrollbar-color: #94a3b8;
    --blockly-scrollbar-bg: #f1f5f9;
}

.dark {
    /* Surface colors - dark mode */
    --color-surface: theme('colors.slate.800');
    --color-surface-secondary: theme('colors.slate.900');
    --color-surface-tertiary: theme('colors.slate.700');
    
    /* Background - dark mode */
    --color-background: theme('colors.slate.900');
    --color-background-elevated: theme('colors.slate.800');
    
    /* Text - dark mode */
    --color-text: theme('colors.slate.100');
    --color-text-secondary: theme('colors.slate.300');
    --color-text-muted: theme('colors.slate.500');
    --color-text-inverted: theme('colors.slate.900');
    
    /* Border - dark mode */
    --color-border: theme('colors.slate.700');
    --color-border-focus: theme('colors.primary.400');
    
    /* Shadows - dark mode */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3);
    
    /* Blockly Theme - dark mode */
    --blockly-workspace-bg: #1e293b;
    --blockly-grid-color: #334155;
    --blockly-flyout-bg: #0f172a;
    --blockly-scrollbar-color: #475569;
    --blockly-scrollbar-bg: #1e293b;
}

/* Apply theme variables to common elements */
body {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-surface-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-text-muted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-secondary);
}

/* Selection styling */
::selection {
    background-color: rgb(59 130 246 / 0.3);
    color: inherit;
}

/* Focus visible styling */
:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
}