/* css/theme-light.css */

/* Light Theme Color Palette
   Color tokens and their hex values are defined in description.txt (section 3, Theme-Light)
   Enhanced with complementary accent colors
*/

:root {
    /* Page and Surface Colors */
    --clr-paper: #F9FAFD;       /* Page background */
    --clr-surface: #FFFFFF;     /* Cards, drawer, and other elevated surfaces */
    --clr-surface-alt: #F5F7FF; /* Alternative surface for variety */

    /* Text and Ink Colors */
    --clr-ink: #2E3145;         /* Primary text color */
    --clr-ink-light: #5a5f78;   /* Secondary, lighter text color for less emphasis */

    /* Brand and Accent Colors */
    --clr-indigo: #5B6DFB;      /* Brand accent, primary Call-to-Actions (CTAs), links */
    --clr-indigo-alpha006: rgba(91, 109, 251, 0.06); /* Transparent indigo for subtle gradients */
    --clr-indigo-dark: #4A5CDC; /* Darker indigo for hover states */
    --clr-mint: #44C1B8;        /* Success accents, secondary highlights */
    --clr-mint-dark: #36A89E;   /* Darker mint for hover states */
    --clr-lavender: #C7C9FF;    /* Hover states, selected items, subtle backgrounds */
    --clr-highlight: #FFE583;   /* Warnings, focus rings, attention-grabbing accents */
    
    /* New Complementary Accent Colors */
    --clr-coral: #FF7E67;       /* Warm accent for attention and energy */
    --clr-coral-light: #FFD4CC; /* Light coral for subtle backgrounds */
    --clr-purple: #9D84F7;      /* Alternative accent color for variety */
    --clr-purple-light: #EDE8FF;/* Light purple for subtle backgrounds */
    --clr-teal: #2ACDC1;        /* Brighter teal variant for emphasis */

    /* Border and Divider Colors */
    --clr-border: #ECEFF5;      /* Hairline dividers, subtle borders */
    --clr-border-dark: #D0D5E0; /* Darker borders for more emphasis when needed */

    /* Shadow Colors - For Depth and Layering */
    --shadow-sm: 0 2px 4px rgba(0, 10, 40, 0.06), 0 1px 2px rgba(0, 10, 40, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 10, 40, 0.08), 0 2px 4px rgba(0, 10, 40, 0.06);
    --shadow-lg: 0 8px 16px rgba(0, 10, 40, 0.1), 0 4px 8px rgba(0, 10, 40, 0.08);
    --shadow-focus: 0 0 0 3px rgba(255, 229, 131, 0.5);
    --shadow-indigo: 0 4px 10px rgba(91, 109, 251, 0.2);
    --shadow-mint: 0 4px 10px rgba(68, 193, 184, 0.2);
    
    /* Z-index Layers - For Consistent Stacking */
    --z-base: 1;
    --z-elevated: 10;
    --z-dropdown: 50;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-toast: 400;
    --z-tooltip: 500;

    /* Spacing Scale - For Consistent Layout */
    --space-2xs: 0.25rem; /* 4px */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 0.75rem;  /* 12px */
    --space-md: 1rem;     /* 16px */
    --space-lg: 1.5rem;   /* 24px */
    --space-xl: 2rem;     /* 32px */
    --space-2xl: 3rem;    /* 48px */
    
    /* Animation Timing - For Consistent Motion */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 500ms;
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

    /* Semantic Color Aliases for Tools */
    --clr-primary: #5B6DFB;      /* Same as --clr-indigo */
    --clr-primary-dark: #4A5CDC; /* Same as --clr-indigo-dark */
    --clr-secondary: #44C1B8;    /* Same as --clr-mint */
    --clr-secondary-dark: #36A89E;/* Same as --clr-mint-dark */
    --clr-success: #44C1B8;      /* Same as --clr-mint */
    --clr-warning: #FFE583;      /* Same as --clr-highlight */
    --clr-danger: #FF7E67;       /* Same as --clr-coral */
    --clr-ink-muted: #5a5f78;    /* Same as --clr-ink-light */
}