/* ======================================================================
   ARZU CAFE — DESIGN TOKENS
   "Selvilerin gölgesinde, denize karşı"

   Turunç, Marmaris'te aile işletmesi. Sıcak, samimi, sakin atmosfer.
   Palet: çam yeşili (primary), turunç turuncusu (accent), deniz mavisi (info),
          kum bej (page), mürekkep yeşili (text).
   Tipografi: Caveat (el yazısı, başlıklar) + Manrope (sans, body).

   Bu dosya tüm tema CSS'lerinden ÖNCE yüklenir.
   Klon override'ları runtime'da settings_json'dan CSS olarak inject edilir.
   ====================================================================== */

:root {
    /* ─────────── BRAND COLORS — ARZU CAFE PALETİ ─────────── */
    --primary:        #2D4A35;     /* Çam yeşili — ana renk (selviler) */
    --primary-dk:     #1F3526;     /* Daha koyu (hover) */
    --primary-lt:     #DCE8DE;     /* Açık yeşil (soft bg) */
    --primary-on:     #F5EDD8;     /* Üstüne sıcak kum tonu yazı */

    --accent:         #E07A3B;     /* Turunç turuncusu — vurgu, CTA */
    --accent-dk:      #B85F26;     /* Daha koyu turunç (hover) */
    --accent-lt:      #FBE5D2;     /* Açık şeftali */
    --accent-on:      #FFFFFF;     /* Beyaz yazı */

    --success:        #5C8A4F;     /* Yaprak yeşili — yumuşak başarı */
    --success-lt:     #DCE8D5;
    --success-on:     #FFFFFF;
    --warning:        #D9A93F;     /* Bal sarısı — sıcak uyarı */
    --warning-lt:     #F8EBC9;
    --warning-on:     #1A3A2F;
    --danger:         #C73E3E;     /* Yumuşak kiremit kırmızı */
    --danger-lt:      #FAD8D8;
    --danger-on:      #FFFFFF;
    --info:           #3A7A92;     /* Deniz mavisi — Turunç koyu suyu */
    --info-lt:        #D6E4EA;
    --info-on:        #FFFFFF;

    /* ─── BUTON TOKENLARI — Live Support FAB ile aynı turunç renk ─── */
    --btn-fab-bg:      var(--accent);
    --btn-fab-text:    var(--accent-on);

    --btn-a11y-bg:     var(--accent);          /* Erişilebilirlik FAB — turunç */
    --btn-a11y-bg-2:   var(--accent-dk);
    --btn-a11y-text:   var(--accent-on);

    --btn-tts-bg:      var(--primary);
    --btn-tts-bg-2:    var(--primary-dk);
    --btn-tts-text:    var(--primary-on);

    --btn-pwa-bg:      var(--accent);          /* PWA install — turunç */
    --btn-pwa-bg-2:    var(--accent-dk);
    --btn-pwa-text:    var(--accent-on);

    --menu-hover-bg:   var(--primary-lt);
    --menu-hover-text: var(--primary-dk);

    /* ─────────── NEUTRALS — SICAK KUM TONLARI ─────────── */
    --bg-page:        #FAF4E4;     /* Sıcak kum — sayfa arkaplanı */
    --bg-card:        #FFFBF0;     /* Daha açık krem — kartlar */
    --bg-soft:        #F5EDD8;     /* Yumuşak kum — bölümler */
    --bg-muted:       #E8DDB8;     /* Solgun kum — disable/divider */

    --text:           #1A3A2F;     /* Mürekkep yeşili — ana metin */
    --text-muted:     #5A6B5C;
    --text-soft:      #9CA89D;
    --text-on-dk:     #F5EDD8;

    --border:         #D4C8A8;
    --border-strong:  #B5A57F;
    --border-dk:      #2D4A35;

    /* ─────────── TYPOGRAPHY — CAVEAT EL YAZISI + MANROPE ─────────── */
    --font-display:   'Caveat', 'Brush Script MT', cursive;
    --font-body:      'Manrope', -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:          22px;
    --fs-2xl:         28px;
    --fs-3xl:         36px;
    --fs-4xl:         48px;
    --fs-5xl:         64px;

    --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 — DAHA YUMUŞAK ─────────── */
    --radius-sm:      6px;
    --radius:         10px;
    --radius-md:      14px;
    --radius-lg:      20px;
    --radius-xl:      28px;
    --radius-full:    9999px;

    /* ─────────── SHADOWS — DAHA SICAK ─────────── */
    --shadow-xs:      0 1px 2px rgba(45, 74, 53, 0.05);
    --shadow-sm:      0 1px 3px rgba(45, 74, 53, 0.07), 0 1px 2px rgba(45, 74, 53, 0.04);
    --shadow:         0 4px 6px -1px rgba(45, 74, 53, 0.08), 0 2px 4px -1px rgba(45, 74, 53, 0.04);
    --shadow-md:      0 10px 15px -3px rgba(45, 74, 53, 0.10), 0 4px 6px -2px rgba(45, 74, 53, 0.05);
    --shadow-lg:      0 20px 25px -5px rgba(45, 74, 53, 0.12), 0 10px 10px -5px rgba(45, 74, 53, 0.05);

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

    /* ─────────── LAYOUT ─────────── */
    --container:      1200px;
    --container-sm:   768px;
    --container-xs:   480px;

    --header-h:       72px;
    --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;
}

[dir="rtl"] {
    /* RTL utilities */
}

/* ─────────── ARZU CAFE — TİPOGRAFİ KARAKTERİ ───────────
   Caveat el yazısı sadece BAŞLIKLARDA — okunaklılık için body Manrope kalır.
   Hero başlığında ekstra letter-spacing ile rahat nefes alır.
*/
.hero-title,
.cs-title,
.fp-title,
.cmp-title,
.about-title,
.gp-title,
.testi-title,
.mc-title,
.kbs-title {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

/* Tagline ve subtitle'lar italik — el yazısının dayanağı */
.hero-tagline,
.cs-subtitle,
.fp-subtitle,
.cmp-subtitle,
.gp-subtitle,
.mc-subtitle {
    font-style: italic;
    font-weight: 400;
    color: var(--text-muted);
}