/* ==========================================================================
   FULL LIFE CARD - DESIGN SYSTEM
   Club del Sole Brand Identity
   ========================================================================== */

/* ==========================================================================
   CSS CUSTOM PROPERTIES - DESIGN TOKENS
   ========================================================================== */
:root {
    /* === BRAND COLORS === */
    --color-primary: #003d7a;
    --color-primary-light: #0056a6;
    --color-primary-dark: #002b5c;
    --color-primary-50: rgba(0, 61, 122, 0.05);
    --color-primary-100: rgba(0, 61, 122, 0.1);
    --color-primary-200: rgba(0, 61, 122, 0.2);
    --color-primary-500: rgba(0, 61, 122, 0.5);
    --color-primary-800: rgba(0, 61, 122, 0.8);
    
    --color-secondary: #ffd700;
    --color-secondary-light: #ffed4e;
    --color-secondary-dark: #e6c200;
    --color-secondary-50: rgba(255, 215, 0, 0.05);
    --color-secondary-100: rgba(255, 215, 0, 0.1);
    --color-secondary-200: rgba(255, 215, 0, 0.2);
    --color-secondary-500: rgba(255, 215, 0, 0.5);
    
    /* === ACCENT COLORS === */
    --color-success: #4caf50;
    --color-success-light: #81c784;
    --color-success-dark: #388e3c;
    
    --color-warning: #ff9800;
    --color-warning-light: #ffb74d;
    --color-warning-dark: #f57c00;
    
    --color-error: #f44336;
    --color-error-light: #ef5350;
    --color-error-dark: #d32f2f;
    
    --color-info: #2196f3;
    --color-info-light: #64b5f6;
    --color-info-dark: #1976d2;
    
    /* === NEUTRAL PALETTE === */
    --color-white: #ffffff;
    --color-black: #000000;
    
    --color-gray-50: #f8f9fa;
    --color-gray-100: #f1f3f4;
    --color-gray-200: #e8eaed;
    --color-gray-300: #dadce0;
    --color-gray-400: #bdc1c6;
    --color-gray-500: #9aa0a6;
    --color-gray-600: #80868b;
    --color-gray-700: #5f6368;
    --color-gray-800: #3c4043;
    --color-gray-900: #202124;
    
    /* === TYPOGRAPHY === */
    --font-family-primary: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
    
    /* Font Sizes - Mobile First */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-6xl: 3.75rem;   /* 60px */
    --font-size-7xl: 4.5rem;    /* 72px */
    --font-size-8xl: 6rem;      /* 96px */
    --font-size-9xl: 8rem;      /* 128px */
    
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    --letter-spacing-tighter: -0.05em;
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0em;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;
    
    /* === SPACING SYSTEM (8px grid) === */
    --space-0: 0;
    --space-px: 1px;
    --space-0-5: 0.125rem;  /* 2px */
    --space-1: 0.25rem;     /* 4px */
    --space-1-5: 0.375rem;  /* 6px */
    --space-2: 0.5rem;      /* 8px */
    --space-2-5: 0.625rem;  /* 10px */
    --space-3: 0.75rem;     /* 12px */
    --space-3-5: 0.875rem;  /* 14px */
    --space-4: 1rem;        /* 16px */
    --space-5: 1.25rem;     /* 20px */
    --space-6: 1.5rem;      /* 24px */
    --space-7: 1.75rem;     /* 28px */
    --space-8: 2rem;        /* 32px */
    --space-9: 2.25rem;     /* 36px */
    --space-10: 2.5rem;     /* 40px */
    --space-11: 2.75rem;    /* 44px */
    --space-12: 3rem;       /* 48px */
    --space-14: 3.5rem;     /* 56px */
    --space-16: 4rem;       /* 64px */
    --space-20: 5rem;       /* 80px */
    --space-24: 6rem;       /* 96px */
    --space-28: 7rem;       /* 112px */
    --space-32: 8rem;       /* 128px */
    --space-36: 9rem;       /* 144px */
    --space-40: 10rem;      /* 160px */
    --space-44: 11rem;      /* 176px */
    --space-48: 12rem;      /* 192px */
    --space-52: 13rem;      /* 208px */
    --space-56: 14rem;      /* 224px */
    --space-60: 15rem;      /* 240px */
    --space-64: 16rem;      /* 256px */
    --space-72: 18rem;      /* 288px */
    --space-80: 20rem;      /* 320px */
    --space-96: 24rem;      /* 384px */
    
    /* === RESPONSIVE BREAKPOINTS === */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    --breakpoint-3xl: 1920px;
    
    /* === BORDER RADIUS === */
    --radius-none: 0;
    --radius-sm: 0.125rem;   /* 2px */
    --radius-base: 0.25rem;  /* 4px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.5rem;    /* 24px */
    --radius-4xl: 2rem;      /* 32px */
    --radius-full: 9999px;
    
    /* === SHADOWS === */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-none: none;
    
    /* Card specific shadows */
    --shadow-card: 0 20px 60px rgba(0, 61, 122, 0.15), 0 8px 25px rgba(0, 61, 122, 0.08);
    --shadow-card-hover: 0 32px 80px rgba(0, 61, 122, 0.20), 0 12px 30px rgba(0, 61, 122, 0.12);
    --shadow-gold: 0 8px 25px rgba(255, 215, 0, 0.3);
    
    /* === TRANSITIONS & ANIMATIONS === */
    --transition-none: none;
    --transition-all: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Easing functions */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* === Z-INDEX SCALE === */
    --z-auto: auto;
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-top: 9999;
    
    /* === BLUR === */
    --blur-none: 0;
    --blur-sm: 4px;
    --blur-base: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-xl: 24px;
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    
    /* === FORM ELEMENTS === */
    --input-height: 44px; /* Touch-friendly minimum */
    --input-padding-x: var(--space-4);
    --input-padding-y: var(--space-3);
    --input-border-width: 1px;
    --input-border-radius: var(--radius-lg);
    --input-focus-ring: 0 0 0 3px var(--color-primary-100);
    
    /* === BUTTON ELEMENTS === */
    --button-height-sm: 36px;
    --button-height-base: 44px;
    --button-height-lg: 52px;
    --button-padding-x-sm: var(--space-4);
    --button-padding-x-base: var(--space-6);
    --button-padding-x-lg: var(--space-8);
    
    /* === GRID & LAYOUT === */
    --max-width-xs: 20rem;    /* 320px */
    --max-width-sm: 24rem;    /* 384px */
    --max-width-md: 28rem;    /* 448px */
    --max-width-lg: 32rem;    /* 512px */
    --max-width-xl: 36rem;    /* 576px */
    --max-width-2xl: 42rem;   /* 672px */
    --max-width-3xl: 48rem;   /* 768px */
    --max-width-4xl: 56rem;   /* 896px */
    --max-width-5xl: 64rem;   /* 1024px */
    --max-width-6xl: 72rem;   /* 1152px */
    --max-width-7xl: 80rem;   /* 1280px */
    --max-width-full: 100%;
    --max-width-screen-sm: 640px;
    --max-width-screen-md: 768px;
    --max-width-screen-lg: 1024px;
    --max-width-screen-xl: 1280px;
    --max-width-screen-2xl: 1536px;
    
    /* === ASPECT RATIOS === */
    --aspect-square: 1 / 1;
    --aspect-video: 16 / 9;
    --aspect-photo: 4 / 3;
    --aspect-card: 5 / 3;
}

/* ==========================================================================
   RESPONSIVE DESIGN TOKENS
   ========================================================================== */

/* Small screens and up */
@media (min-width: 640px) {
    :root {
        --font-size-xs: 0.8125rem;  /* 13px */
        --font-size-sm: 0.9375rem;  /* 15px */
        --font-size-base: 1.0625rem; /* 17px */
        --font-size-lg: 1.1875rem;  /* 19px */
        --font-size-xl: 1.375rem;   /* 22px */
        --font-size-2xl: 1.625rem;  /* 26px */
        --font-size-3xl: 2rem;      /* 32px */
        --font-size-4xl: 2.5rem;    /* 40px */
        --font-size-5xl: 3.25rem;   /* 52px */
        --font-size-6xl: 4rem;      /* 64px */
    }
}

/* Medium screens and up */
@media (min-width: 768px) {
    :root {
        --font-size-base: 1.125rem;  /* 18px */
        --font-size-lg: 1.25rem;     /* 20px */
        --font-size-xl: 1.5rem;      /* 24px */
        --font-size-2xl: 1.75rem;    /* 28px */
        --font-size-3xl: 2.125rem;   /* 34px */
        --font-size-4xl: 2.75rem;    /* 44px */
        --font-size-5xl: 3.5rem;     /* 56px */
        --font-size-6xl: 4.25rem;    /* 68px */
        --font-size-7xl: 5rem;       /* 80px */
    }
}

/* Large screens and up */
@media (min-width: 1024px) {
    :root {
        --font-size-4xl: 3rem;       /* 48px */
        --font-size-5xl: 3.75rem;    /* 60px */
        --font-size-6xl: 4.5rem;     /* 72px */
        --font-size-7xl: 5.5rem;     /* 88px */
        --font-size-8xl: 6.5rem;     /* 104px */
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root {
        --color-gray-50: #1a1a1a;
        --color-gray-100: #2d2d2d;
        --color-gray-200: #404040;
        --color-gray-300: #525252;
        --color-gray-400: #737373;
        --color-gray-500: #a3a3a3;
        --color-gray-600: #d4d4d4;
        --color-gray-700: #e5e5e5;
        --color-gray-800: #f5f5f5;
        --color-gray-900: #ffffff;
    }
}

/* ==========================================================================
   REDUCED MOTION SUPPORT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: none;
        --transition-base: none;
        --transition-slow: none;
        --transition-slower: none;
    }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #000080;
        --color-secondary: #ffff00;
        --color-gray-300: #000000;
        --color-gray-600: #ffffff;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
    :root {
        --color-primary: #000000;
        --color-secondary: #000000;
        --shadow-card: none;
        --shadow-card-hover: none;
    }
}