/* ============================================
   Design System Variables & Base Styles
   ============================================ */

:root {
    /* Colors - Elegant Teal Theme */
    --color-primary: #4DB8C4;        /* Bright teal */
    --color-secondary: #2D8A99;      /* Deep teal */
    --color-background: #E8F4F5;     /* Light cyan background */
    --color-accent: #1ABC9C;         /* Vibrant accent teal */
    --color-text-dark: #2C3E50;      /* Dark slate for text */
    --color-text-light: #FFFFFF;     /* White text */
    --color-locked: #95A5A6;         /* Muted gray for locked */
    --color-card-bg: #FFFFFF;        /* Card background */
    --color-shadow-teal: rgba(77, 184, 196, 0.25);  /* Teal shadow */
    --color-shadow-deep: rgba(45, 138, 153, 0.15);  /* Deep teal shadow */

    /* Animation Timing */
    --header-duration: 800ms;
    --header-delay: 0ms;
    --countdown-duration: 600ms;
    --countdown-delay: 300ms;
    --card-duration: 500ms;
    --card-delay-increment: 100ms;
    --card-base-delay: 500ms;
    --hover-duration: 250ms;
    --modal-open-duration: 600ms;
    --modal-close-duration: 250ms;
    --content-delay: 400ms;
    --today-pulse: 2.5s;
    --countdown-pulse: 2s;

    /* Easing */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: ease-out;
    --ease-in: ease-in;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
}

/* Base Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: linear-gradient(135deg, #E8F4F5 0%, #C8E6E8 100%);
    color: var(--color-text-dark);
    min-height: 100vh;
    padding: var(--spacing-md);
    overflow-x: hidden;
}