/* ==========================================================================
   CSS Custom Properties — SolarBaba Design Tokens
   Ohio temasından birebir çıkarılmış değerler
   ========================================================================== */

:root {
    /* ── Colors ── */
    --color-accent:       #4583B4;
    --color-accent-hover: #3a7199;
    --color-accent-light: #EEF3F7;
    --color-text:         #283742;
    --color-text-light:   #6b7c8a;
    --color-text-muted:   #9aabb8;
    --color-white:        #FFFFFF;
    --color-black:        #000000;
    --color-border:       #eaf0f6;
    --color-section-bg:   #ffffff;  /* The main body background color is pure white */
    --color-bg-white:     #f4f8fc;  /* Card background is now light blue/grey */
    --color-overlay:      rgba(40, 55, 66, 0.7);
    --color-shadow:       rgba(0, 0, 0, 0.03);
    --color-shadow-hover: rgba(0, 0, 0, 0.08);

    /* ── Typography ── */
    --font-family:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base:     16px;
    --font-size-sm:       14px;
    --font-size-xs:       12px;
    --font-size-lg:       18px;
    --font-size-xl:       20px;
    --line-height-base:   1.7;
    --line-height-heading: 1.3;

    /* ── Font Weights ── */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ── Heading Sizes (Desktop) ── */
    --h1-size: 54px;
    --h2-size: 38px;
    --h3-size: 24px;
    --h4-size: 20px;
    --h5-size: 16px;
    --h6-size: 14px;

    /* ── Spacing ── */
    --space-unit: 8px;
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   32px;
    --space-2xl:  48px;
    --space-3xl:  64px;
    --space-4xl:  80px;
    --space-5xl:  120px;

    /* ── Layout ── */
    --container-max:     1320px;
    --container-padding: 60px;
    --content-width:     1000px;

    /* ── Border Radius ── */
    --radius-sm:     4px;
    --radius-md:     6px;
    --radius-lg:     10px;
    --radius-xl:     14px;
    --radius-pill:   30px;
    --radius-circle: 50%;

    /* ── Header ── */
    --header-height:  80px;
    --header-top:     30px;
    --header-padding: 10px 30px;
    --header-radius:  50px;
    --header-bg:      #ffffff;
    --header-z:       1000;

    /* ── Transitions ── */
    --transition-fast:   0.2s ease;
    --transition-base:   0.3s ease;
    --transition-slow:   0.5s ease;
    --transition-spring: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ── Z-Index ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-fixed:     500;
    --z-header:    1000;
    --z-overlay:   2000;
    --z-modal:     3000;
    --z-preloader: 9999;
}