/* ==========================================================================
   Looponia Design System - CSS Variables
   Based on app wellness color palette from theme_colors.dart
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
     Primary Brand Colors
     ------------------------------------------------------------------------- */
    --primary: #6366F1;
    /* Indigo - Main brand color */
    --primary-hover: #818CF8;
    /* Lighter indigo on hover */
    --primary-dark: #4F46E5;
    /* Darker indigo */
    --splash-purple: #6237A0;
    /* Logo/splash purple */

    /* -------------------------------------------------------------------------
     12 Wellness Colors
     Each color chosen for psychological wellbeing benefits
     ------------------------------------------------------------------------- */

    /* Azzurro Serenità - Calm, Focus (Default) */
    --wellness-serenity: #7EA8BE;

    /* Verde Salvia - Harmony, Growth */
    --wellness-sage: #81A684;

    /* Lavanda Creativa - Creativity, Inspiration */
    --wellness-lavender: #9B8FB9;

    /* Corallo Soft - Gentle Motivation */
    --wellness-coral: #D4949A;

    /* Teal Focus - Deep Concentration */
    --wellness-teal: #5B9A9F;

    /* Rosa Antico - Inner Peace */
    --wellness-rose: #CFA5A5;

    /* Verde Bosco - Progress, Resilience */
    --wellness-forest: #6B8F71;

    /* Blu Polvere - Clarity, Expression */
    --wellness-dusty-blue: #7991B3;

    /* Beige Sabbia - Stability */
    --wellness-sand: #C9B8A3;

    /* Pesca Luminoso - Gentle Joy */
    --wellness-peach: #E5B299;

    /* Grigio Salvia - Wisdom, Reflection */
    --wellness-sage-gray: #8B949E;

    /* Menta Vitale - Renewal, Vitality */
    --wellness-mint: #90C9AB;

    /* -------------------------------------------------------------------------
     Gradients (from app theme)
     ------------------------------------------------------------------------- */
    --gradient-serenity: linear-gradient(135deg, #7EA8BE 0%, #9B8FB9 100%);
    --gradient-nature: linear-gradient(135deg, #81A684 0%, #90C9AB 100%);
    --gradient-sunset: linear-gradient(135deg, #E5B299 0%, #D4949A 100%);
    --gradient-ocean: linear-gradient(135deg, #7EA8BE 0%, #5B9A9F 100%);
    --gradient-forest: linear-gradient(135deg, #6B8F71 0%, #81A684 100%);
    --gradient-twilight: linear-gradient(135deg, #9B8FB9 0%, #7991B3 100%);
    --gradient-hero: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(155, 143, 185, 0.1) 100%);

    /* -------------------------------------------------------------------------
     Background Colors (Dark Theme)
     ------------------------------------------------------------------------- */
    --bg-primary: #0F1419;
    /* Main background - from app */
    --bg-secondary: #1A1F26;
    /* Secondary/elevated surfaces */
    --bg-tertiary: #242A33;
    /* Cards, modals */
    --bg-card: #1E2530;
    /* Card backgrounds */
    --bg-glass: rgba(30, 37, 48, 0.7);
    /* Glassmorphism */
    --bg-glass-hover: rgba(36, 42, 51, 0.85);

    /* -------------------------------------------------------------------------
     Text Colors
     ------------------------------------------------------------------------- */
    --text-primary: #F8FAFC;
    /* Main text */
    --text-secondary: #94A3B8;
    /* Muted text */
    --text-tertiary: #64748B;
    /* Even more muted */
    --text-accent: #C7D2FE;
    /* Accent text (light indigo) */
    --text-on-primary: #FFFFFF;
    /* Text on primary buttons */

    /* -------------------------------------------------------------------------
     Border & Divider Colors
     ------------------------------------------------------------------------- */
    --border-primary: rgba(148, 163, 184, 0.15);
    --border-secondary: rgba(148, 163, 184, 0.08);
    --border-accent: rgba(99, 102, 241, 0.3);
    --border-glass: rgba(255, 255, 255, 0.08);

    /* -------------------------------------------------------------------------
     Semantic Colors
     ------------------------------------------------------------------------- */
    --success: #10B981;
    /* Green */
    --success-bg: rgba(16, 185, 129, 0.1);
    --warning: #F59E0B;
    /* Amber */
    --warning-bg: rgba(245, 158, 11, 0.1);
    --error: #EF4444;
    /* Red */
    --error-bg: rgba(239, 68, 68, 0.1);
    --info: #06B6D4;
    /* Cyan */
    --info-bg: rgba(6, 182, 212, 0.1);

    /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
    --font-display: 'Corinthia', cursive;
    /* Brand/logo font */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Font Sizes - Fluid typography */
    --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 4.5rem);
    --text-hero: clamp(3.5rem, 2.5rem + 5vw, 5.5rem);
    /* Corinthia logo */

    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Letter Spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
    --tracking-logo: 0.125em;
    /* For Looponia title */

    /* -------------------------------------------------------------------------
     Spacing System (8px base)
     ------------------------------------------------------------------------- */
    --space-0: 0;
    --space-1: 0.25rem;
    /* 4px */
    --space-2: 0.5rem;
    /* 8px */
    --space-3: 0.75rem;
    /* 12px */
    --space-4: 1rem;
    /* 16px */
    --space-5: 1.25rem;
    /* 20px */
    --space-6: 1.5rem;
    /* 24px */
    --space-8: 2rem;
    /* 32px */
    --space-10: 2.5rem;
    /* 40px */
    --space-12: 3rem;
    /* 48px */
    --space-16: 4rem;
    /* 64px */
    --space-20: 5rem;
    /* 80px */
    --space-24: 6rem;
    /* 96px */
    --space-32: 8rem;
    /* 128px */

    /* Section spacing */
    --section-padding: clamp(4rem, 8vw, 8rem);
    --container-padding: clamp(1rem, 4vw, 2rem);

    /* -------------------------------------------------------------------------
     Layout
     ------------------------------------------------------------------------- */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1440px;
    --container-max: 1600px;

    /* -------------------------------------------------------------------------
     Border Radius
     ------------------------------------------------------------------------- */
    --radius-sm: 0.375rem;
    /* 6px */
    --radius-md: 0.5rem;
    /* 8px */
    --radius-lg: 0.75rem;
    /* 12px */
    --radius-xl: 1rem;
    /* 16px */
    --radius-2xl: 1.5rem;
    /* 24px */
    --radius-3xl: 2rem;
    /* 32px */
    --radius-full: 9999px;

    /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    --shadow-glow-lg: 0 0 40px rgba(99, 102, 241, 0.4);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.15);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.2);

    /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    --transition-slower: 500ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* -------------------------------------------------------------------------
     Z-Index Scale
     ------------------------------------------------------------------------- */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
    --z-toast: 80;
    --z-max: 9999;

    /* -------------------------------------------------------------------------
     Glassmorphism Effects
     ------------------------------------------------------------------------- */
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-glass: 12px;

    /* -------------------------------------------------------------------------
     Botanical Tree Colors (for tree animation)
     ------------------------------------------------------------------------- */
    --tree-trunk: #5D4E37;
    --tree-trunk-dark: #4A3D2A;
    --tree-branch: #6B5B45;
    --tree-leaf-young: #90C9AB;
    --tree-leaf-mature: #6B8F71;
    --tree-glow: rgba(144, 201, 171, 0.3);
    --tree-particle: #90C9AB;
}

/* ==========================================================================
   Dark mode is default, but support light mode if needed
   ========================================================================== */
@media (prefers-color-scheme: light) {
    :root.auto-theme {
        --bg-primary: #F8FAFC;
        --bg-secondary: #F1F5F9;
        --bg-tertiary: #E2E8F0;
        --bg-card: #FFFFFF;
        --bg-glass: rgba(255, 255, 255, 0.7);
        --text-primary: #0F172A;
        --text-secondary: #475569;
        --text-tertiary: #64748B;
        --border-primary: rgba(15, 23, 42, 0.1);
        --border-secondary: rgba(15, 23, 42, 0.05);
    }
}