﻿/* ================================
   YENİŞEHİR ÇİÇEKÇİLİK
   Public Site Renk Paleti & Değişkenler
   Logo tonlarına uygun, soft ve modern
   ================================ */

:root {
    /* ===== PRIMARY COLORS (Logonuza uygun) ===== */
    --primary-yellow: #FFC107;
    --primary-yellow-dark: #FFA000;
    --primary-yellow-light: #FFECB3;
    --primary-pink: #F48FB1;
    --primary-pink-dark: #E91E63;
    --primary-pink-light: #FCE4EC;
    --primary-green: #66BB6A;
    --primary-green-dark: #388E3C;
    --primary-green-light: #C8E6C9;
    /* ===== NEUTRAL COLORS ===== */
    --text-primary: #212121;
    --text-secondary: #757575;
    --text-light: #9E9E9E;
    --text-white: #FFFFFF;
    --bg-white: #FFFFFF;
    --bg-light: #FAFAFA;
    --bg-gray: #F5F5F5;
    --bg-dark: #2C2C2C;
    --border-light: #E0E0E0;
    --border-medium: #BDBDBD;
    /* ===== SEMANTIC COLORS ===== */
    --success: #66BB6A;
    --warning: #FFA726;
    --error: #EF5350;
    --info: #42A5F5;
    /* ===== GRADIENTS ===== */
    --gradient-primary: linear-gradient(135deg, var(--primary-yellow) 0%, var(--primary-pink) 100%);
    --gradient-green: linear-gradient(135deg, var(--primary-green-light) 0%, var(--primary-green-dark) 100%);
    --gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 100%);
    /* ===== SHADOWS ===== */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-xl: 0 12px 24px rgba(0,0,0,0.18);
    /* ===== TRANSITIONS ===== */
    --transition-fast: all 0.2s ease;
    --transition-normal: all 0.3s ease;
    --transition-slow: all 0.5s ease;
    /* ===== SPACING ===== */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    /* ===== TYPOGRAPHY ===== */
    --font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --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-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* ===== LAYOUT ===== */
    --header-height: 80px;
    --header-height-mobile: 60px;
    --max-width-container: 1200px;
    --max-width-wide: 1400px;
    /* ===== Z-INDEX ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
/* Bunları media query'lerde kullanacağız */
/* 
Mobile: < 576px
Tablet: 576px - 768px
Desktop: 768px - 992px
Large: 992px - 1200px
XLarge: > 1200px
*/
