/* BaCare Website Styles - Warm Healthcare Design */
/* ================================================ */
/* A warm, trustworthy design system for home care services */
/* Inspired by Home Instead and Honor Care best practices */

/* Import fonts - Lora (serif) for warmth & trust, Inter (sans) for clarity */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ========================================== */
/* SUBTLE ANIMATIONS - ELEGANT & RESTRAINED   */
/* No shimmer, glow-pulse, or border-beam     */
/* ========================================== */

/* Simple fade for scroll reveals */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Gentle float for decorative elements only */
@keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* ========================================== */
/* CSS VARIABLES - WARM HEALTHCARE PALETTE    */
/* ========================================== */
:root {
    /* ----------------------------------------
       TYPOGRAPHY
       Lora (serif) for headings - warmth & trust
       Inter (sans) for body - clarity & modern
    ---------------------------------------- */
    --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ----------------------------------------
       PRIMARY COLORS - Soft Teal/Blue-Green
       Calming, professional, healthcare-appropriate
       Inspired by Home Instead's soft blue palette
    ---------------------------------------- */
    --primary-50: #F0F7F6;
    --primary-100: #D9EDEB;
    --primary-200: #B3DBD7;
    --primary-300: #8DC9C3;
    --primary-400: #5FB3AC;
    --primary-500: #3D8F89;      /* Main brand color - soft teal */
    --primary-600: #2F726D;
    --primary-700: #235552;
    --primary-800: #173938;
    --primary-900: #0C1C1D;

    /* Semantic primary aliases */
    --primary-color: var(--primary-500);
    --primary-dark: var(--primary-700);
    --primary-light: var(--primary-400);
    --primary-lighter: var(--primary-100);
    --primary-muted: var(--primary-200);

    /* ----------------------------------------
       SECONDARY COLORS - Warm Coral/Peach
       Approachable, human, caring
       Inspired by Honor Care's warm orange accents
    ---------------------------------------- */
    --secondary-50: #FEF6F4;
    --secondary-100: #FCEAE6;
    --secondary-200: #F9D5CD;
    --secondary-300: #F5C0B4;
    --secondary-400: #F0A99A;
    --secondary-500: #D98570;      /* Main secondary - warm coral */
    --secondary-600: #BF6B56;
    --secondary-700: #A55240;
    --secondary-800: #8A3A2B;
    --secondary-900: #702317;

    /* Semantic secondary aliases */
    --accent-coral: var(--secondary-500);
    --accent-coral-light: var(--secondary-100);
    --accent-coral-muted: var(--secondary-200);

    /* ----------------------------------------
       ACCENT COLORS - Soft Gold/Amber
       Premium, trustworthy, warm highlight
    ---------------------------------------- */
    --accent-50: #FEFBF5;
    --accent-100: #FDF5E6;
    --accent-200: #FAEACC;
    --accent-300: #F6DEB3;
    --accent-400: #F0CE8C;
    --accent-500: #C9A865;       /* Main accent - soft gold */
    --accent-600: #A8894C;
    --accent-700: #876A34;
    --accent-800: #664C1E;
    --accent-900: #45310A;

    /* Semantic accent aliases */
    --accent-orange: var(--accent-500);
    --accent-orange-light: var(--accent-100);
    --accent-warm: var(--accent-500);
    --accent-warm-light: var(--accent-50);

    /* ----------------------------------------
       SEMANTIC COLORS - Status Indicators
       Softer, more muted for healthcare context
    ---------------------------------------- */
    --success-50: #F2F9F5;
    --success-100: #E0F2E8;
    --success-500: #5AAF8C;      /* Softer green */
    --success-600: #469A78;
    --success-700: #357D60;

    --warning-50: #FFFBF0;
    --warning-100: #FEF4D9;
    --warning-500: #D4A252;
    --warning-600: #B88A3E;

    --error-50: #FEF5F4;
    --error-100: #FCE8E6;
    --error-500: #D66B5C;
    --error-600: #BF5344;

    --info-50: #F4F7FC;
    --info-100: #E5EDF8;
    --info-500: #6B8FC9;
    --info-600: #5477B3;

    /* Semantic status aliases */
    --success-green: var(--success-500);
    --success-light: var(--success-100);

    /* ----------------------------------------
       NEUTRAL COLORS - Warm Grays
       Warmer undertones (NOT cool blue-grays)
    ---------------------------------------- */
    --neutral-50: #FDFCFB;       /* Warm white - slightly cream */
    --neutral-100: #F8F6F3;      /* Light cream */
    --neutral-150: #F3F0EC;      /* Soft cream */
    --neutral-200: #EBE7E1;      /* Light warm gray */
    --neutral-300: #DCD6CD;      /* Warm gray */
    --neutral-400: #B8B0A4;      /* Mid warm gray */
    --neutral-500: #8A8279;      /* Balanced warm gray */
    --neutral-600: #5F5850;      /* Dark warm gray */
    --neutral-700: #423D37;      /* Darker warm gray */
    --neutral-800: #2D2924;      /* Very dark warm */
    --neutral-900: #1A1714;      /* Near black, warm */

    /* ----------------------------------------
       TEXT COLORS - Readable, warm
    ---------------------------------------- */
    --text-dark: var(--neutral-800);
    --text-medium: var(--neutral-600);
    --text-light: var(--neutral-500);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-50);

    /* ----------------------------------------
       BACKGROUND COLORS - Warm, inviting
       Cream/off-white instead of pure white
    ---------------------------------------- */
    --bg-white: #FFFFFF;
    --bg-cream: var(--neutral-50);
    --bg-warm: var(--neutral-100);
    --bg-light: var(--neutral-150);
    --bg-subtle: var(--neutral-200);
    --bg-dark: var(--neutral-800);

    /* ----------------------------------------
       BORDER COLORS - Soft, unobtrusive
    ---------------------------------------- */
    --border-light: var(--neutral-200);
    --border-medium: var(--neutral-300);
    --border-strong: var(--neutral-400);

    /* ----------------------------------------
       GRADIENTS - Soft, professional
       No animated gradients
    ---------------------------------------- */
    --gradient-primary: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-400) 100%);
    --gradient-warm: linear-gradient(135deg, var(--secondary-400) 0%, var(--accent-400) 100%);
    --gradient-hero: linear-gradient(
        168deg,
        var(--neutral-50) 0%,
        var(--neutral-100) 35%,
        var(--primary-50) 100%
    );
    --gradient-hero-overlay: linear-gradient(
        135deg,
        rgba(61, 143, 137, 0.02) 0%,
        rgba(217, 133, 112, 0.02) 100%
    );
    --gradient-card: linear-gradient(
        180deg,
        #FFFFFF 0%,
        var(--neutral-50) 100%
    );
    --gradient-cta: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);

    /* ----------------------------------------
       SHADOWS - Soft, warm-toned
       Using warm undertones, not cold blue-gray
    ---------------------------------------- */
    --shadow-color: 45, 41, 36;  /* Warm shadow base */

    --shadow-xs: 0 1px 2px rgba(var(--shadow-color), 0.04);
    --shadow-sm: 0 2px 4px rgba(var(--shadow-color), 0.05);
    --shadow-md:
        0 4px 8px -2px rgba(var(--shadow-color), 0.06),
        0 2px 4px -1px rgba(var(--shadow-color), 0.03);
    --shadow-lg:
        0 10px 20px -4px rgba(var(--shadow-color), 0.08),
        0 4px 8px -2px rgba(var(--shadow-color), 0.04);
    --shadow-xl:
        0 16px 32px -6px rgba(var(--shadow-color), 0.10),
        0 6px 12px -3px rgba(var(--shadow-color), 0.05);
    --shadow-2xl:
        0 24px 48px -8px rgba(var(--shadow-color), 0.12),
        0 8px 16px -4px rgba(var(--shadow-color), 0.06);

    /* Card-specific shadows */
    --shadow-card: var(--shadow-md);
    --shadow-card-hover: var(--shadow-lg);

    /* ----------------------------------------
       BORDER RADIUS - Friendly, approachable
       Slightly larger for warmer feel
    ---------------------------------------- */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-2xl: 32px;
    --radius-full: 9999px;

    /* ----------------------------------------
       SPACING - 8px Grid System
       Generous for breathing room
    ---------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ----------------------------------------
       TRANSITIONS - Smooth, elegant
       No bouncy/spring effects
    ---------------------------------------- */
    --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    --duration-fast: 150ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;

    --transition-fast: var(--duration-fast) var(--ease-out);
    --transition-base: var(--duration-base) var(--ease-out);
    --transition-slow: var(--duration-slow) var(--ease-out);
}