/*
CSS Variables - Design tokens for Snacked AI
Defines color palette, spacing, typography, and other design constants
*/

:root {
    /* ========== COLOR PALETTE ========== */
    /* Exact hex codes: #f5f4f0 (cream), #1d56e8 (blue), #09a964 (green), 
       #e5ec5d (yellow), #ffbaf9 (pink), #f55e39 (coral) */
    
    /* Base Colors */
    --background: hsl(48, 17%, 95%);        /* #f5f4f0 - Cream background */
    --foreground: hsl(0, 0%, 10%);          /* Near black text */
    
    /* Primary Colors */
    --primary: hsl(223, 82%, 51%);          /* #1d56e8 - Blue for CTAs */
    --primary-foreground: hsl(0, 0%, 100%); /* White */
    
    /* Secondary Colors */
    --secondary: hsl(154, 90%, 35%);        /* #09a964 - Green */
    --secondary-foreground: hsl(0, 0%, 100%);
    
    /* Accent Colors */
    --accent: hsl(12, 90%, 59%);            /* #f55e39 - Coral */
    --accent-foreground: hsl(0, 0%, 100%);
    
    /* Highlight Color */
    --highlight: hsl(63, 78%, 65%);         /* #e5ec5d - Yellow */
    --highlight-foreground: hsl(0, 0%, 10%);
    
    /* Pink Color */
    --pink: hsl(305, 100%, 86%);            /* #ffbaf9 - Pink */
    --pink-foreground: hsl(0, 0%, 10%);
    
    /* Card Colors */
    --card: hsl(0, 0%, 100%);               /* White cards */
    --card-foreground: hsl(0, 0%, 10%);
    
    /* Muted Colors */
    --muted: hsl(48, 15%, 90%);             /* Muted cream based on background */
    --muted-foreground: hsl(0, 0%, 35%);    /* Gray text */
    
    /* Border */
    --border: hsl(48, 15%, 85%);            /* Light borders based on background */
    --border-dark: hsl(0, 0%, 10%);         /* Black borders for cards */
    --border-width: 1px;                     /* Thin border width */
    
    /* ========== GRADIENTS ========== */
    
    --gradient-wavy: linear-gradient(135deg, 
        hsl(305, 100%, 86%) 0%,    /* Pink #ffbaf9 */
        hsl(154, 90%, 35%) 50%,     /* Green #09a964 */
        hsl(223, 82%, 51%) 100%     /* Blue #1d56e8 */
    );
    
    --gradient-pink-green: linear-gradient(120deg,
        hsl(305, 100%, 86%) 0%,     /* Pink #ffbaf9 */
        hsl(154, 90%, 35%) 100%     /* Green #09a964 */
    );
    
    --gradient-blue-pink: linear-gradient(135deg,
        hsl(223, 82%, 51%) 0%,      /* Blue #1d56e8 */
        hsl(305, 100%, 86%) 100%    /* Pink #ffbaf9 */
    );
    
    /* ========== SHADOWS ========== */
    
    --shadow-glow: 0 20px 60px -15px hsla(223, 82%, 51%, 0.4);    /* Blue #1d56e8 */
    --shadow-float: 0 10px 40px -10px hsla(223, 82%, 51%, 0.3);   /* Blue #1d56e8 */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* ========== TYPOGRAPHY ========== */
    
    /* Font Families */
    --font-heading: 'Wedges', sans-serif;
    --font-body: 'Space Mono', monospace;
    
    /* Font Sizes */
    --text-xs: 0.75rem;      /* 12px */
    --text-sm: 0.875rem;     /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg: 1.125rem;     /* 18px */
    --text-xl: 1.25rem;      /* 20px */
    --text-2xl: 1.5rem;      /* 24px */
    --text-3xl: 1.875rem;    /* 30px */
    --text-4xl: 2.25rem;     /* 36px */
    --text-5xl: 3rem;        /* 48px */
    --text-6xl: 3.75rem;     /* 60px */
    --text-7xl: 4rem;        /* 64px */
    
    /* Font Weights */
    --font-normal: 400;
    --font-bold: 700;
    --font-black: 900;
    
    /* Line Heights */
    --leading-tight: 1.1;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    
    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    
    /* ========== SPACING ========== */
    
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-4xl: 6rem;       /* 96px */
    --space-5xl: 8rem;       /* 128px */
    
    /* Section Padding */
    --section-padding-y: 6rem;   /* Desktop */
    --section-padding-y-mobile: 4rem;
    
    /* ========== LAYOUT ========== */
    
    --container-max-width: 1280px;
    --container-padding: 2rem;
    --container-padding-mobile: 1rem;
    
    /* ========== BORDER RADIUS ========== */
    
    --radius-sm: 0.5rem;     /* 8px */
    --radius-md: 0.75rem;    /* 12px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;   /* Full round */
    
    /* ========== Z-INDEX LAYERS ========== */
    
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-tooltip: 60;
    
    /* ========== BREAKPOINTS (for reference in JS) ========== */
    
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* ========== TRANSITIONS ========== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-bounce: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}