/* ===================================
   Design Tokens, single source of truth
   Loaded FIRST on every page, before all other stylesheets.
   Pages must not redefine these; page stylesheets only consume them.
   =================================== */

:root {
    /* Colors */
    --primary: #7c6cf5;
    --primary-dark: #6555e0;
    --primary-light: #9686f9;
    --secondary: #5cc8d4;
    --accent: #f87cb3;
    --warm: #f5a623;
    --dark: #1a202c;
    --light: #f7fafc;
    --gray: #718096;
    --gray-light: #e2e8f0;
    --gray-dark: #2d3748;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #7c6cf5 0%, #c084fc 100%);
    --gradient-secondary: linear-gradient(135deg, #f87cb3 0%, #fb923c 100%);
    --gradient-accent: linear-gradient(135deg, #5cc8d4 0%, #38bdf8 100%);
    --gradient-warm: linear-gradient(135deg, #f5a623 0%, #f87cb3 100%);
    --gradient-dark: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);

    /* Backgrounds */
    --bg-color: #fffbfe;
    --bg-secondary: #f3eeff;
    --card-bg: #ffffff;
    --modal-bg: rgba(255, 255, 255, 0.97);

    /* Text */
    --text-primary: #2d2440;
    --text-secondary: #6b5f8a;
    --text-light: #a090c0;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.09), 0 6px 10px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.13);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.22);
    --shadow-glow: 0 0 40px rgba(124, 108, 245, 0.45);

    /* Borders */
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-spring: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Font */
    --font-primary: 'Poppins', sans-serif;
    --font-secondary: 'Inter', sans-serif;

    /* ---------------------------------
       Component aliases, legacy names still used by the page stylesheets.
       They map onto the palette above so a theme change stays a one-line edit.
       --------------------------------- */
    --primary-color: var(--primary);
    --secondary-color: var(--accent);
    --accent-color: var(--secondary);
    --text-color: var(--text-primary);
    --bg-input: var(--bg-color);
    --border-color: var(--gray-light);
    --box-shadow: var(--shadow-sm);
    --box-shadow-lg: var(--shadow-xl);
    --success-color: #4ade80;
    --error-color: #e53e3e;
    --warning-color: #ed8936;
    --water-light: rgba(124, 108, 245, 0.10);
    --water-medium: rgba(124, 108, 245, 0.18);
    --transition: var(--transition-base);

    /* Spacing + type scale */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --font-size-sm: 0.9rem;
    --font-size-xl: 1.25rem;

    /* Animation timings */
    --animation-fast: 150ms;
    --animation-medium: 300ms;
    --animation-slow: 600ms;
}

/* Dark Mode */
[data-theme="dark"] {
    --bg-color: #0d0b16;
    --bg-secondary: #14102a;
    --card-bg: #1c1830;
    --modal-bg: rgba(20, 16, 40, 0.97);
    --text-primary: #ede9f8;
    --text-secondary: #b8adda;
    --text-light: #7060a0;
    --gray-light: #2a2245;
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);
    --shadow-glow: 0 0 60px rgba(124, 108, 245, 0.7);
}