/* =====================================================
   Dervişoğlu Turizm Taşımacılık — Design Tokens
   Kaynak: /themes/documentation/design-system/
   Bu dosya sadece :root değişkenlerini tanımlar.
   Component/reset stilleri için base.css, layout.css,
   components.css dosyalarına bakınız.
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ── NAVY / LACİVERT (dominant) ── */
  --color-navy-deepest:   #002244;   /* Header bg, footer bg */
  --color-navy-primary:   #003366;   /* Ana marka rengi, H1-H3, section header */
  --color-navy-mid:       #0A3D73;   /* Hero gradient sonu, hover state */
  --color-navy-light:     #1A5599;   /* İkon vurguları, link hover */
  --color-navy-tint:      #D6E6F7;   /* Kart border, ayırıcı çizgiler */
  --color-navy-surface:   #EBF2FA;   /* Section arka planları */

  /* ── TURUNCU (yalnızca CTA) ── */
  --color-cta:            #F37021;   /* Primary buton bg */
  --color-cta-hover:      #D45C0A;   /* Primary buton hover */
  --color-cta-tint:       #FFF3EA;   /* Turuncu tint (badge/tag zemin) */

  /* ── YÜZEYLER ── */
  --color-white:          #FFFFFF;
  --color-surface-light:  #EBF2FA;
  --color-surface-card:   #FFFFFF;

  /* ── METİN ── */
  --color-text-primary:   #1A2B3C;
  --color-text-secondary: #4A6B8A;
  --color-text-muted:     #7A9BB5;
  --color-text-on-navy:   #FFFFFF;
  --color-text-on-cta:    #FFFFFF;

  /* ── BORDER ── */
  --color-border:         #D6E6F7;
  --color-border-strong:  #A8C8E8;

  /* ── BAŞLIK METNİ ──
     navy-primary hem "marka rengi/arka plan" hem "başlık metni" olarak
     kullanıldığı için dark mode'da ikisi birlikte koyulaşınca kart/section
     yüzeyleri üstündeki başlıklar okunmaz hale geliyordu. Bu token yalnızca
     METİN için kullanılır ve dark modda text-primary'ye döner. */
  --color-heading: var(--color-navy-primary);

  /* ── DURUM ── */
  --color-success:        #0D7A3E;
  --color-success-bg:     #E6F4ED;
  --color-warning:        #B45309;
  --color-warning-bg:     #FEF3C7;
  --color-danger:         #B91C1C;
  --color-danger-bg:      #FEE2E2;

  /* ── FONT AİLELERİ ── */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── TİP ÖLÇEĞİ ── */
  --text-display:        clamp(36px, 5vw, 56px);
  --text-display-weight: 800;
  --text-display-lh:     1.15;
  --text-display-ls:     -0.03em;

  --text-h1:        clamp(28px, 4vw, 40px);
  --text-h1-weight: 800;
  --text-h1-lh:     1.2;
  --text-h1-ls:     -0.02em;

  --text-h2:        clamp(22px, 3vw, 32px);
  --text-h2-weight: 700;
  --text-h2-lh:     1.3;
  --text-h2-ls:     -0.015em;

  --text-h3:        clamp(18px, 2.5vw, 24px);
  --text-h3-weight: 700;
  --text-h3-lh:     1.35;

  --text-h4:        18px;
  --text-h4-weight: 600;
  --text-h4-lh:     1.4;

  --text-body-lg:        18px;
  --text-body-lg-weight: 400;
  --text-body-lg-lh:     1.7;

  --text-body:        16px;
  --text-body-weight: 400;
  --text-body-lh:     1.65;

  --text-body-sm:    14px;
  --text-body-sm-lh: 1.6;

  --text-eyebrow:           11px;
  --text-eyebrow-weight:    700;
  --text-eyebrow-ls:        0.12em;
  --text-eyebrow-transform: uppercase;

  --text-label:    13px;
  --text-label-weight: 600;
  --text-label-ls: 0.02em;

  --text-caption:    12px;
  --text-caption-lh: 1.5;

  --text-btn:        14px;
  --text-btn-weight: 700;
  --text-btn-ls:     0.01em;

  /* ── SPACING (4px tabanlı) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ── CONTAINER & GRID ── */
  --container-max:  1280px;
  --container-xl:   1400px;
  --gutter:         24px;
  --margin-mobile:  16px;
  --margin-tablet:  32px;
  --margin-desktop: 64px;

  /* ── COMPONENT SPACING ── */
  --card-padding-sm: 16px 20px;
  --card-padding:    24px 28px;
  --card-padding-lg: 32px 36px;

  --btn-padding-sm: 8px 16px;
  --btn-padding:    12px 24px;
  --btn-padding-lg: 14px 32px;

  --input-padding:    10px 16px;
  --nav-item-padding: 8px 16px;

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

  /* ── SHADOW (navy tabanlı) ── */
  --shadow-sm:    0 1px 4px rgba(0, 51, 102, 0.08);
  --shadow-md:    0 4px 16px rgba(0, 51, 102, 0.10);
  --shadow-lg:    0 8px 32px rgba(0, 51, 102, 0.12);
  --shadow-xl:    0 16px 48px rgba(0, 51, 102, 0.14);
  --shadow-hover: 0 8px 24px rgba(0, 51, 102, 0.16);

  /* ── TRANSITION ── */
  --transition-fast:  all 0.15s ease;
  --transition:       all 0.2s ease;
  --transition-slow:  all 0.3s ease;
  --transition-color: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;

  /* ── Z-INDEX ── */
  --z-header:     1000;
  --z-drawer:     1100;
  --z-sticky-cta: 999;
}

/* ── DARK MODE — data-theme="dark" ile tetiklenir ── */
[data-theme="dark"] {
  --color-navy-deepest:   #0C1828;
  --color-navy-primary:   #0F1E33;
  --color-navy-mid:       #152238;
  /* NOT: navy-light HER YERDE ön plan rengi olarak kullanılır (eyebrow
     metni, ikon vurguları, link hover, outline) — navy-primary/-mid gibi
     koyulaştırılırsa koyu zeminde okunmaz hale gelir (bkz. yukarıdaki
     --color-heading notu, aynı sınıf hata). Bu yüzden dark modda AÇIK bir
     vurgu tonuna döner, diğer navy-* token'ların tersine. */
  --color-navy-light:     #6FA8E0;
  --color-navy-tint:      #2A4A6E;
  --color-navy-surface:   #152238;

  --color-cta:       #F37021;   /* Turuncu dark modda değişmez */
  --color-cta-hover: #D45C0A;
  --color-cta-tint:  #2A1A0A;

  --color-white:         #1E3050;
  --color-surface-light: #152238;
  --color-surface-card:  #1E3050;

  --color-text-primary:   #E8F0FB;
  --color-text-secondary: #6FA8E0;
  --color-text-muted:     #4A6B8A;
  --color-text-on-navy:   #E8F0FB;

  --color-border:        #2A4A6E;
  --color-border-strong: #3A6A9E;

  --color-heading: var(--color-text-primary);

  --shadow-sm:    0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* NOT: Sistem tercihi (prefers-color-scheme) kasıtlı olarak otomatik
   uygulanmıyor — varsayılan mod her zaman aydınlıktır. Kullanıcı
   dark-mode.js üzerinden manuel geçtiğinde [data-theme="dark"] eklenir.
   Bkz. views/header.php içindeki FOUC-engelleme script'i ve
   assets/js/dark-mode.js. */