/* Fortius Spa - CSS Variables */
/* Renk Paleti: SPA Salonu Web Sitesi Renk Paleti.md */

:root {
    /* Ana Renkler - Okyanus Mavisi Teması (Yeşile çalmayan saf mavi) */
    --primary-color: #0077BE;           /* Okyanus Mavisi - Ana vurgu rengi */
    --primary-light: #0099CC;           /* Açık Okyanus Mavisi - Hover durumları */
    --primary-dark: #004D99;            /* Koyu Okyanus Mavisi - Aktif durumlar */
    
    /* İkincil Renkler - Lüks Altın Tonları */
    --secondary-color: #D4AF37;         /* Altın - Lüks vurgu */
    --secondary-light: #E5C158;         /* Açık Altın */
    --secondary-dark: #B8941E;          /* Koyu Altın */
    
    /* Metin Renkleri - Yüksek Kontrast */
    --text-color: #2C3E50;              /* Ana metin - Koyu gri-mavi (WCAG: 12.6:1) */
    --text-muted: #5D6D7E;              /* İkincil metin - Orta gri (WCAG: 7.2:1) */
    --text-light: #7F8C8D;              /* Soluk metin - Açık gri (WCAG: 5.1:1) */
    
    /* Arkaplan Renkleri - Kum ve Beyaz Teması */
    --bg-primary: #FFFFFF;              /* Ana arkaplan - Beyaz */
    --bg-secondary: #F8F9FA;            /* İkincil arkaplan - Çok açık gri */
    --bg-light: #F5F5F5;                /* Açık arkaplan - Açık gri */
    --bg-sand: #F5E6D3;                 /* Kum bej - Özel bölümler */
    --bg-cream: #FFF8E7;                /* Krem - Vurgu bölümleri */
    
    /* Kenarlık ve Ayırıcılar */
    --border-color: #E0E0E0;            /* Standart kenarlık - Açık gri */
    --border-light: #F0F0F0;            /* Açık kenarlık - Çok açık gri */
    --border-accent: #B2DFDB;           /* Vurgu kenarlık - Açık turkuaz */
    
    /* Deniz Teması Renkleri */
    --ocean-blue: #00CED1;              /* Okyanus mavisi */
    --ocean-light: #B2EBF2;             /* Açık okyanus mavisi */
    --ocean-dark: #008B8B;              /* Koyu okyanus mavisi */
    --aqua: #40E0D0;                    /* Aqua - Deniz yeşili */
    
    /* Güneş ve Sıcak Tonlar */
    --sun-gold: #FFD700;                /* Güneş altını */
    --sun-light: #FFE87C;               /* Açık güneş sarısı */
    --coral: #FF7F50;                   /* Mercan - Sıcak vurgu */
    
    /* Lüks Tonlar */
    --luxury-gold: #D4AF37;             /* Lüks altın */
    --luxury-bronze: #CD7F32;           /* Bronz */
    --luxury-copper: #B87333;           /* Bakır */
    
    /* Spa ve Huzur Renkleri */
    --spa-teal: #20B2AA;                /* Spa turkuaz */
    --spa-mint: #B2F5EA;                /* Nane yeşili - Ferahlık */
    --spa-lavender: #E6E6FA;            /* Lavanta - Sakinlik */
    
    /* Başarı ve Bilgi Renkleri */
    --success: #28A745;                 /* Başarı yeşili (WCAG: 4.5:1) */
    --info: #17A2B8;                    /* Bilgi turkuaz (WCAG: 4.5:1) */
    --warning: #FFC107;                 /* Uyarı sarısı (WCAG: 4.5:1) */
    --danger: #DC3545;                  /* Hata kırmızısı (WCAG: 4.5:1) */
    
    /* Buton Renkleri */
    --btn-primary: #0077BE;             /* Birincil buton - Okyanus mavisi */
    --btn-primary-hover: #0099CC;       /* Birincil buton hover - Açık okyanus mavisi */
    --btn-secondary: #D4AF37;           /* İkincil buton - Altın */
    --btn-secondary-hover: #E5C158;     /* İkincil buton hover */
    
    /* Link Renkleri */
    --link-color: #0077BE;              /* Link rengi - Okyanus mavisi */
    --link-hover: #0099CC;              /* Link hover - Açık okyanus mavisi */
    
    /* Shadow ve Efektler */
    --shadow-sm: rgba(0, 0, 0, 0.05);   /* Küçük gölge */
    --shadow-md: rgba(0, 0, 0, 0.1);    /* Orta gölge */
    --shadow-lg: rgba(0, 0, 0, 0.15);   /* Büyük gölge */
    --shadow-ocean: rgba(0, 139, 139, 0.2); /* Okyanus gölgesi */
    
    /* Typography */
    --font-primary: 'DM Sans', sans-serif;          /* Başlıklar için DM Sans */
    --font-secondary: 'Poppins', sans-serif;        /* Body, menü ve diğer her şey için Poppins */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;
    --font-size-4xl: 64px;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;
    --spacing-2xl: 6rem;
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s ease;
    
    /* Z-index Layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}