/* ============================================================================
   ELDERASSIST MARKETING WEBSITE - THEME VARIABLES
   Default CSS custom properties that can be overridden by country themes
   ============================================================================ */

:root {
    /* ========== COLORS ========== */
    /* Primary brand colors */
    --color-primary: #2563eb;           /* Blue */
    --color-primary-dark: #1d4ed8;
    --color-primary-light: #3b82f6;

    /* Secondary colors */
    --color-secondary: #7c3aed;         /* Purple */
    --color-secondary-dark: #6d28d9;
    --color-secondary-light: #8b5cf6;

    /* Accent colors */
    --color-accent: #f59e0b;            /* Amber */
    --color-success: #10b981;           /* Green */
    --color-warning: #f59e0b;           /* Orange */
    --color-error: #ef4444;             /* Red */
    --color-info: #3b82f6;              /* Blue */

    /* Neutral colors */
    --color-text: #3E2723;              /* Warm dark brown for body text */
    --color-text-muted: #6D4C41;        /* Medium brown for secondary text */
    --color-text-light: #9E8A7D;        /* Light warm brown */
    --color-heading: #3E2723;           /* Warm dark brown for headings */

    /* Background colors */
    --color-background: #FFFBF7;        /* Warm white with slight peach tint */
    --color-background-alt: #FFF5EE;    /* Soft seashell cream */
    --color-background-dark: #111827;   /* Dark mode (future) */

    /* Border colors */
    --color-border: #E8DCD0;            /* Warm tan border */
    --color-border-light: #F5EDE5;      /* Light warm border */

    /* ========== TYPOGRAPHY ========== */
    --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Outfit', 'Plus Jakarta Sans', sans-serif;
    --font-family-mono: 'Fira Code', 'Courier New', monospace;

    /* Font sizes */
    --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 */

    /* Line heights */
    --line-height-tight: 1.3;           /* Slightly looser for warmth */
    --line-height-base: 1.7;            /* More breathing room */
    --line-height-relaxed: 1.85;
    --line-height-loose: 2.1;

    /* Font weights */
    --font-weight-light: 200;           /* Extra light for elegant headings */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* ========== SPACING ========== */
    --spacing-unit: 8px;
    --spacing-xs: calc(var(--spacing-unit) * 0.5);   /* 4px */
    --spacing-sm: var(--spacing-unit);               /* 8px */
    --spacing-md: calc(var(--spacing-unit) * 2);     /* 16px */
    --spacing-lg: calc(var(--spacing-unit) * 3);     /* 24px */
    --spacing-xl: calc(var(--spacing-unit) * 4);     /* 32px */
    --spacing-2xl: calc(var(--spacing-unit) * 6);    /* 48px */
    --spacing-3xl: calc(var(--spacing-unit) * 8);    /* 64px */
    --spacing-4xl: calc(var(--spacing-unit) * 10);   /* 80px */
    --spacing-5xl: calc(var(--spacing-unit) * 12);   /* 96px */

    /* ========== LAYOUT ========== */
    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);
    --section-spacing: var(--spacing-5xl);

    /* ========== BORDERS ========== */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* ========== SHADOWS ========== */
    /* Warm-tinted shadows using terracotta rgba(210, 105, 30) instead of black */
    --shadow-xs: 0 1px 2px 0 rgba(210, 105, 30, 0.05);
    --shadow-sm: 0 2px 4px 0 rgba(210, 105, 30, 0.08);
    --shadow-md: 0 4px 8px 0 rgba(210, 105, 30, 0.1);
    --shadow-lg: 0 8px 16px 0 rgba(210, 105, 30, 0.12);
    --shadow-xl: 0 12px 24px 0 rgba(210, 105, 30, 0.15);
    --shadow-2xl: 0 20px 40px 0 rgba(210, 105, 30, 0.18);

    /* ========== TRANSITIONS ========== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* ========== Z-INDEX ========== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}