/* ==========================================
   VARIABLES.CSS - CSS Custom Properties
   Design Tokens for Where2Baby
   ========================================== */

:root {
    /* ==========================================
       COLORS - Primary (Warm Terracotta)
       ========================================== */
    --color-primary: #BA7D62;
    --color-primary-dark: #986651;
    --color-primary-light: #DCAA97;
    --color-primary-hover: #986651;
    --color-primary-faded: #F5EBE6;
    --gradient-primary: linear-gradient(135deg, #BA7D62 0%, #986651 100%);

    --color-secondary: #93AB7D;
    --color-secondary-dark: #748267;
    --color-secondary-light: #C4D7B3;
    --color-secondary-hover: #748267;
    --color-secondary-faded: #EEF3E9;

    --color-accent: #435F78;
    --color-accent-dark: #3A526B;
    --color-accent-light: #5B7BA8;

    /* ==========================================
       COLORS - Text
       ========================================== */
    --color-text: #3A3330;
    --color-text-dark: #3A3330;
    --color-text-muted: #7A7270;
    --color-text-light: #7A7270;
    --color-text-lighter: #7A7270;
    --color-text-body: #3A3330;
    --color-text-white: #fff;
    --color-text-on-primary: #FFFFFF;

    /* ==========================================
       COLORS - Status
       ========================================== */
    --color-success: #93AB7D;
    --color-success-dark: #748267;
    --color-success-bg: #EEF3E9;
    --color-success-text: #748267;

    --color-warning: #E8B44D;
    --color-warning-bg: #FDF3DC;
    --color-warning-text: #9A7020;

    --color-danger: #D4735A;
    --color-danger-dark: #B55E47;
    --color-danger-bg: #FAEBE6;
    --color-danger-text: #8C4535;

    --color-info: #6A9EC2;
    --color-info-alt: #6A9EC2;
    --color-info-bg: #E4F0F7;
    --color-info-text: #4A7A9E;

    /* ==========================================
       COLORS - UI
       ========================================== */
    --color-background: #FAF8F6;
    --color-background-alt: #F5F2EF;
    --color-surface: #FFFFFF;
    --color-surface-secondary: #F5F2EF;
    --color-border: #E8E2DD;
    --color-border-light: #F0EBE7;
    --color-border-input: #E8E2DD;

    /* Star Rating */
    --color-star-filled: #E8B44D;
    --color-star-empty: #F0EBE7;

    /* Navigation Colors */
    --color-nav-bg: var(--color-surface);
    --color-nav-text: var(--color-primary);
    --color-nav-text-hover: var(--color-primary-dark);

    /* ==========================================
       SPACING
       ========================================== */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* ==========================================
       BORDER RADIUS — "Soft & Round"
       ========================================== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-pill: 9999px;
    --radius-full: 9999px;

    /* ==========================================
       SHADOWS — Warm-tinted
       ========================================== */
    --shadow-sm: 0 2px 8px rgba(186, 125, 98, 0.08);
    --shadow-sm-light: 0 2px 4px rgba(186, 125, 98, 0.06);
    --shadow-md: 0 4px 12px rgba(186, 125, 98, 0.10);
    --shadow-md-light: 0 4px 8px rgba(186, 125, 98, 0.08);
    --shadow-lg: 0 8px 24px rgba(186, 125, 98, 0.12);
    --shadow-lg-dark: 0 8px 24px rgba(186, 125, 98, 0.15);
    --shadow-lg-strong: 0 4px 4px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 32px rgba(186, 125, 98, 0.15);
    --shadow-primary: 0 4px 12px rgba(186, 125, 98, 0.20);
    --shadow-primary-sm: 0 2px 4px rgba(186, 125, 98, 0.15);
    --shadow-primary-lg: 0 4px 8px rgba(186, 125, 98, 0.25);

    /* ==========================================
       TYPOGRAPHY
       ========================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-mono: monospace;

    --font-size-xxs: 0.5rem;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-normal: 1.6;
    --line-height-tight: 1.2;
    --line-height-relaxed: 1.8;

    /* ==========================================
       TRANSITIONS
       ========================================== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* ==========================================
       Z-INDEX SCALE
       ========================================== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-map: 550;
    --z-map-utils: 600;
    --z-map-overlay: 700;
    --z-header: 1999;
    --z-footer: 1999;
    --z-modal: 2000;
    --z-toast: 9999;
    --z-lightbox: 10000;

    /* ==========================================
       CONTAINER WIDTHS
       ========================================== */
    --container-sm: 500px;
    --container-md: 800px;
    --container-lg: 1000px;
    --container-xl: 1200px;
    --container-2xl: 1320px;

    --header-height-desktop: 80px;
    --header-height-tablet: 70px;
    --header-height-mobile: 70px;

    --footer-height-desktop: 50px;
    --footer-height-tablet: 50px;
    --footer-height-mobile: 50px;

    /* ==========================================
       MAP HEIGHTS
       ========================================== */
    --map-height-desktop: calc(100vh - var(--header-height-desktop) - var(--footer-height-desktop));
    --map-height-tablet: calc(100vh - var(--header-height-tablet) - var(--footer-height-tablet));
    --map-height-mobile: calc(100vh - var(--header-height-mobile) - var(--footer-height-mobile));
    --map-height-preview: 400px;
    --map-height-preview-mobile: 300px;

    /* ==========================================
       COMPONENT SIZES
       ========================================== */
    --touch-target-min: 44px;
    --icon-size-sm: 16px;
    --icon-size-md: 24px;
    --icon-size-lg: 48px;
}