/**
 * CSS Variables and Design Tokens
 * Contains all color, typography, and spacing variables
 */

/* Import Google Fonts - Young Serif + Jost only */
@import url('https://fonts.googleapis.com/css2?family=Young+Serif&family=Jost:wght@300;400;500;600;700&display=swap');

:root {
    /* Primary Blues */
    --primary-blue: #4285F4;
    --light-blue: #57CBFF;
    --pale-blue: #E2EFF3;
    
    /* Greens */
    --primary-green: #34A853;
    --light-green: #5CDE6D;
    --pale-green: #EAFEEA;
    
    /* Yellows */
    --primary-yellow: #FBBC04;
    --light-yellow: #FFD527;
    --pale-yellow: #F2EFE0;
    
    /* Reds */
    --primary-red: #E74639;
    --light-red: #FFDBDB;
    --pale-red: #F2E6E6;
    
    /* Business card palette */
    --cream: #F8F3E9;
    --stripe-pink: #F9C7D5;
    --stripe-coral: #F78B78;
    --stripe-mustard: #EBC877;
    --stripe-purple: #B295C9;
    --stripe-mint: #74C7BF;
    --stripe-sky: #62BFE3;
    --navy: #27345F;
    --navy-muted: #555D7C;
    
    /* Base color assignments (business card alignment) */
    --primary-color: var(--stripe-coral);
    --secondary-color: var(--primary-green);
    --accent-color: var(--primary-yellow);
    --danger-color: var(--primary-red);
    --dark-color: var(--navy);
    --light-color: var(--cream);
    --gray-color: var(--navy-muted);
    
    /* Burgundy alias → coral for backward compatibility */
    --burgundy: var(--stripe-coral);
    --burgundy-hover: #E5736A;
    --burgundy-soft: var(--stripe-pink);
    --burgundy-rgb: 247, 139, 120; /* stripe-coral for rgba() */
    
    /* UI elements */
    --border-radius: 4px;
    --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    --transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
    
    /* Fonts */
    --heading-font: 'Young Serif', serif;
    --subheading-font: 'Young Serif', serif;
    --body-font: 'Jost', sans-serif;
    
    /* Sticker Dream-Inspired Variables */
    --sticker-pastel-blue: #B8E6FF;
    --sticker-pastel-pink: #FFD6E8;
    --sticker-pastel-yellow: #FFF4B8;
    --sticker-pastel-green: #D4F4DD;
    --sticker-pastel-purple: #E8D4FF;
    --sticker-pastel-orange: #FFE8D4;
    
    /* Diagonal stripe motif (nav + footer) */
    --stripe-gradient: repeating-linear-gradient(
        105deg,
        var(--stripe-pink),
        var(--stripe-pink) 8px,
        var(--stripe-coral) 8px,
        var(--stripe-coral) 16px,
        var(--stripe-mustard) 16px,
        var(--stripe-mustard) 24px,
        var(--stripe-purple) 24px,
        var(--stripe-purple) 32px,
        var(--stripe-mint) 32px,
        var(--stripe-mint) 40px,
        var(--stripe-sky) 40px,
        var(--stripe-sky) 48px
    );

    /* Thick border styling */
    --sticker-border-width: 4px;
    --sticker-border-color: #2c2c54;
    --sticker-shadow: 8px 8px 0 rgba(44, 44, 84, 0.15);
    --sticker-shadow-hover: 12px 12px 0 rgba(44, 44, 84, 0.2);
}