/* CSS Custom Properties - Light Theme Design System */
:root {
    /* Background layers - Light theme */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F8FAFC;
    --bg-tertiary: #F1F5F9;
    --bg-elevated: #FFFFFF;

    /* Legacy mappings for compatibility */
    --bg-dark: var(--bg-primary);
    --bg-section: var(--bg-secondary);

    /* Text hierarchy - Dark text on light */
    --text-primary: #18181B;
    --text-secondary: #52525B;
    --text-muted: #71717A;
    --text-subtle: #A1A1AA;

    /* Accent colors - Indigo primary */
    --accent-primary: #4F46E5;
    --accent-primary-hover: #4338CA;
    --accent-secondary: #10B981;
    --accent-tertiary: #F59E0B;
    --accent-error: #EF4444;

    /* Legacy purple vars - map to indigo for compatibility */
    --purple-primary: var(--accent-primary);
    --purple-secondary: var(--accent-primary-hover);
    --accent-cyan: var(--accent-primary);
    --electric-blue: var(--accent-primary);

    /* Borders - Dark borders on light */
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);

    /* Shadows for depth */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* Glass effects - Light theme */
    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: var(--border-default);
}