/* ========================================
   CSS Custom Properties (Design Tokens)
   Heart Health Color Theme
   ======================================== */

:root {
    /* Heart Health Colors */
    --heart-red: #e85d4c;
    --heart-pink: #f58b94;
    --heart-coral: #ff8a75;
    --heart-rose: #e87c73;
    --ecg-purple: #9b7abd;

    /* Muted/Accent Versions */
    --accent-red: #ff6b5b;
    --accent-orange: #ff9f5a;
    --accent-yellow: #f5c156;
    --accent-green: #7cb77f;
    --accent-blue: #5b9bd5;
    --accent-purple: #8b7ab8;

    /* Primary Brand Colors */
    --color-primary: var(--heart-red);
    --color-secondary: var(--ecg-purple);

    /* Neutral Colors */
    --color-text: #2d2d2d;
    --color-text-muted: #6b6b6b;
    --color-bg: #f8f7f4;
    --color-bg-light: #f0efe9;
    --color-white: #ffffff;
    --color-footer: #2d2d2d;

    /* Gradients */
    --gradient: linear-gradient(135deg, var(--heart-red) 0%, var(--heart-pink) 100%);
    --gradient-heart: linear-gradient(135deg,
        var(--heart-red) 0%,
        var(--heart-pink) 25%,
        var(--heart-coral) 50%,
        var(--heart-rose) 75%,
        var(--heart-red) 100%
    );
    --gradient-subtle: linear-gradient(135deg, #e85d4c 0%, #f58b94 50%, #9b7abd 100%);

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-section: 80px;

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-size-sm: 0.9rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.2rem;
    --font-size-2xl: 1.3rem;
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.8rem;
    --font-size-5xl: 2rem;
    --font-size-6xl: 2.5rem;
    --font-size-7xl: 3rem;

    /* Line height */
    --line-height: 1.6;
    --line-height-tight: 1.8;

    /* Border radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 15px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;

    /* Container widths */
    --container-narrow: 1000px;
    --container-wide: 1200px;
}