/* ======================================================================
   YZ DEFAULT — DESIGN TOKENS
   Modern minimalist palette. Clean SaaS aesthetic.

   Bu dosya tüm tema CSS'lerinden ÖNCE yüklenir.
   İleride aim_theme_settings tablosundan runtime PHP ile üretilebilir.
   ====================================================================== */

:root {
    /* ─────────── BRAND COLORS — KEBAPTOON ─────────── */
    --primary:        #FFD23F;     /* Mango sarı — ana marka rengi */
    --primary-dk:     #F5B500;     /* Koyu sarı — hover */
    --primary-lt:     #FFF4C2;     /* Açık sarı — soft bg */
    --primary-on:     #181818;     /* Sarı üstüne siyah yazı (yüksek kontrast) */

    --accent:         #FF3B3B;     /* Kırmızı — CTA, vurgu */
    --accent-dk:      #E12626;     /* Koyu kırmızı — hover */
    --accent-lt:      #FFE0E0;     /* Açık kırmızı — soft bg */
    --accent-on:      #ffffff;     /* Kırmızı üstüne beyaz yazı */

    --success:        #10b981;     /* Emerald 500 */
    --success-lt:     #d1fae5;
    --warning:        #f59e0b;     /* Amber 500 */
    --warning-lt:     #fef3c7;
    --danger:         #ef4444;     /* Red 500 */
    --danger-lt:      #fee2e2;
    --info:           #06b6d4;     /* Cyan 500 */

    /* ─────────── NEUTRALS — KEBAPTOON ─────────── */
    --bg-page:        #FFD23F;     /* Sayfa default = mango sarı (hero) */
    --bg-card:        #ffffff;     /* Kart arkaplanı */
    --bg-soft:        #F5EFE0;     /* Krem — alt section'lar (featured products) */
    --bg-muted:       #EFE5C8;     /* Daha koyu krem — divider */
    --bg-dark:        #181818;     /* Heavy siyah — signature/discovery section */

    --text:           #181818;     /* Heavy siyah */
    --text-muted:     #5C5650;     /* Koyu krem ton — sub text */
    --text-soft:      #A09689;     /* Açık krem ton — placeholder */
    --text-on-dk:     #ffffff;     /* Siyah üstü beyaz yazı */

    --border:         #181818;     /* Pop art heavy siyah border (kalın) */
    --border-light:   #EFE5C8;     /* Hafif krem border */
    --border-strong:  #181818;     /* Aynı — heavy */
    --border-dk:      #181818;

    /* Pop art offset shadow — kartlar ve sticker'lar için */
    --shadow-pop:     4px 4px 0 #181818;
    --shadow-pop-sm: 2px 2px 0 #181818;
    --shadow-pop-lg: 6px 6px 0 #181818;
    --shadow-pop-red:4px 4px 0 #FF3B3B;

    /* 3D text effect — hero başlık (kırmızı 3D shadow + siyah outline) */
    --text-3d-shadow: 3px 3px 0 #FF3B3B;
    --text-3d-shadow-lg: 5px 5px 0 #FF3B3B;

    /* ─────────── TYPOGRAPHY — KEBAPTOON ─────────── */
    /* Sora = ana marka karakteri (heavy, condensed, pop-art); ATESCI_PWA kaynağıyla aynı */
    --font-display:   'Sora', 'Archivo Black', 'Bebas Neue', system-ui, sans-serif;
    --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:      'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --fs-xs:          12px;
    --fs-sm:          14px;
    --fs-base:        16px;
    --fs-lg:          18px;
    --fs-xl:          20px;
    --fs-2xl:         24px;
    --fs-3xl:         30px;
    --fs-4xl:         36px;
    --fs-5xl:         48px;

    --fw-normal:      400;
    --fw-medium:      500;
    --fw-semibold:    600;
    --fw-bold:        700;

    --lh-tight:       1.2;
    --lh-snug:        1.4;
    --lh-normal:      1.6;
    --lh-relaxed:     1.75;

    /* ─────────── SPACING ─────────── */
    --sp-0:           0;
    --sp-1:           4px;
    --sp-2:           8px;
    --sp-3:           12px;
    --sp-4:           16px;
    --sp-5:           20px;
    --sp-6:           24px;
    --sp-8:           32px;
    --sp-10:          40px;
    --sp-12:          48px;
    --sp-16:          64px;
    --sp-20:          80px;

    /* ─────────── BORDER RADIUS ─────────── */
    --radius-sm:      4px;
    --radius:         8px;
    --radius-md:      12px;
    --radius-lg:      16px;
    --radius-xl:      24px;
    --radius-full:    9999px;

    /* ─────────── SHADOWS ─────────── */
    --shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow:         0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -1px rgba(0,0,0,0.04);
    --shadow-md:      0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg:      0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);

    /* ─────────── TRANSITIONS ─────────── */
    --t-fast:         120ms ease;
    --t-base:         200ms ease;
    --t-slow:         320ms ease;

    /* ─────────── LAYOUT ─────────── */
    --container:      1200px;       /* Maks içerik genişliği */
    --container-sm:   768px;
    --container-xs:   480px;

    --header-h:       64px;         /* Header yüksekliği */
    --footer-h:       auto;

    /* ─────────── Z-INDEX SCALE ─────────── */
    --z-dropdown:     100;
    --z-sticky:       200;
    --z-overlay:      300;
    --z-modal:        400;
    --z-popover:      500;
    --z-tooltip:      600;
    --z-toast:        700;
}

/* RTL desteği için */
[dir="rtl"] {
    /* RTL'de margin/padding mirror'lanır — utility class'larda kullanılır */
}