/* ============================================================
   QUL — Design Tokens
   Tüm renk, boşluk, tipografi, yarıçap, gölge ve layout ölçüleri
   burada tanımlanır; diğer stylesheet'ler yalnızca bu değişkenleri
   kullanır. (Dark mode bilinçli olarak bu modülde yok; eklenecekse
   [data-theme="dark"] altında yalnızca renk token'ları ezilir.)
   ============================================================ */

:root {
    /* ---------- Renk: nötr (mürekkep / kâğıt / taş) ---------- */
    --qul-ink:         #1a1a1a;   /* birincil metin & primary buton */
    --qul-ink-soft:    #333333;   /* hover */
    --qul-body:        #4a4a4a;   /* gövde metni */
    --qul-muted:       #6d6d6d;   /* ikincil metin — beyaz üzerinde AA (4.5:1) */
    --qul-faint:       #767370;   /* placeholder, pasif ikon — AA (4.5:1) */
    --qul-stone:       #b9b6b0;   /* taş grisi (draft, nötr vurgu) */
    --qul-paper:       #ffffff;   /* yüzey */
    --qul-soft:        #f4f4f2;   /* yumuşak arka plan */
    --qul-soft-2:      #ebebe7;   /* hover / seçili yumuşak */
    --qul-line:        #e4e2de;   /* ince çizgi */
    --qul-line-strong: #cfcdc7;   /* input border, güçlü çizgi */

    /* ---------- Renk: marka (logo gradyanından) ---------- */
    --qul-slate:        #5a6b78;  /* accent, link, focus */
    --qul-slate-soft:   #7d8b96;
    --qul-slate-light:  #a9bfce;
    --qul-slate-tint:   #eef2f5;
    --qul-slate-deep:   #3f5261;
    --qul-brand-gradient: linear-gradient(135deg, #515257 0%, #7d8b96 55%, #a9bfce 100%);
    --qul-cover-gradient: linear-gradient(165deg, #8ba3b5 0%, #5e7788 45%, #3f5261 100%);

    /* ---------- Renk: anlamsal (sakin, doygunluğu düşük) ---------- */
    --qul-success:      #3f6b4f;
    --qul-success-tint: #eaf2ec;
    --qul-warning:      #8a6a2f;
    --qul-warning-tint: #f7f0e2;
    --qul-danger:       #8f3a3a;
    --qul-danger-soft:  #a54848;
    --qul-danger-tint:  #f7e9e9;
    --qul-info:         var(--qul-slate);
    --qul-info-tint:    var(--qul-slate-tint);

    /* ---------- Renk: durumlar ---------- */
    --qul-status-draft:    var(--qul-stone);
    --qul-status-active:   var(--qul-success);
    --qul-status-archived: var(--qul-muted);
    --qul-status-pending:  var(--qul-warning);
    --qul-status-approved: var(--qul-success);
    --qul-status-rejected: var(--qul-danger);

    /* ---------- Etkileşim ---------- */
    --qul-focus-ring:   0 0 0 3px rgba(90, 107, 120, 0.28);
    --qul-focus-danger: 0 0 0 3px rgba(143, 58, 58, 0.25);
    --qul-overlay:      rgba(26, 26, 26, 0.45);
    --qul-transition:   0.18s ease;
    --qul-transition-slow: 0.3s ease;

    /* ---------- Tipografi ---------- */
    --qul-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --qul-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --qul-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --qul-text-2xs: 0.68rem;
    --qul-text-xs:  0.75rem;
    --qul-text-sm:  0.85rem;
    --qul-text-md:  0.95rem;   /* gövde */
    --qul-text-lg:  1.1rem;
    --qul-text-xl:  1.35rem;
    --qul-text-2xl: 1.75rem;
    --qul-text-3xl: 2.25rem;
    --qul-text-display: clamp(2.4rem, 5vw, 3.6rem);

    --qul-leading-tight: 1.15;
    --qul-leading-snug:  1.35;
    --qul-leading-base:  1.6;
    --qul-leading-loose: 1.85;

    --qul-tracking-tight: -0.01em;
    --qul-tracking-wide:  0.06em;
    --qul-tracking-eyebrow: 0.22em;

    --qul-weight-light:  300;
    --qul-weight-normal: 400;
    --qul-weight-medium: 500;
    --qul-weight-semibold: 600;

    /* ---------- Boşluk (4px tabanlı) ---------- */
    --qul-space-1: 0.25rem;
    --qul-space-2: 0.5rem;
    --qul-space-3: 0.75rem;
    --qul-space-4: 1rem;
    --qul-space-5: 1.5rem;
    --qul-space-6: 2rem;
    --qul-space-7: 3rem;
    --qul-space-8: 4rem;
    --qul-space-9: 6rem;

    /* ---------- Yarıçap ---------- */
    --qul-radius-xs:   3px;
    --qul-radius-sm:   4px;
    --qul-radius-md:   6px;
    --qul-radius-lg:   8px;
    --qul-radius-xl:   12px;
    --qul-radius-pill: 999px;

    /* ---------- Gölge (çok yumuşak) ---------- */
    --qul-shadow-xs: 0 1px 2px rgba(26, 26, 26, 0.04);
    --qul-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.05);
    --qul-shadow-md: 0 8px 24px rgba(26, 26, 26, 0.07);
    --qul-shadow-lg: 0 18px 48px rgba(26, 26, 26, 0.12);

    /* ---------- Katmanlar ---------- */
    --qul-z-sticky:  1020;
    --qul-z-sidebar: 1030;
    --qul-z-drawer:  1045;
    --qul-z-modal:   1055;
    --qul-z-toast:   1090;

    /* ---------- Layout ölçüleri ---------- */
    --qul-sidebar-w:       264px;
    --qul-topbar-h:        64px;
    --qul-builder-aside-w: 300px;
    --qul-builder-topbar-h: 60px;
    --qul-builder-footer-h: 72px;
    --qul-content-max:     1120px;
    --qul-form-max:        640px;
    --qul-prose-max:       720px;
    --qul-memorial-max:    720px;
    --qul-page-pad:        var(--qul-space-4);

    /* ---------- Bootstrap köprüsü ----------
       Bootstrap 5.3 bileşenleri (modal, dropdown, offcanvas, grid)
       QUL token'larını kullansın diye ilgili --bs-* değişkenleri ezilir. */
    --bs-body-font-family: var(--qul-sans);
    --bs-body-font-size:   var(--qul-text-md);
    --bs-body-line-height: var(--qul-leading-base);
    --bs-body-color:       var(--qul-body);
    --bs-body-bg:          var(--qul-paper);
    --bs-heading-color:    var(--qul-ink);
    --bs-secondary-color:  var(--qul-muted);
    --bs-tertiary-bg:      var(--qul-soft);
    --bs-link-color:       var(--qul-slate);
    --bs-link-hover-color: var(--qul-ink);
    --bs-link-decoration:  none;
    --bs-border-color:     var(--qul-line);
    --bs-border-radius:    var(--qul-radius-sm);
    --bs-border-radius-sm: var(--qul-radius-xs);
    --bs-border-radius-lg: var(--qul-radius-lg);
    --bs-border-radius-xl: var(--qul-radius-xl);
    --bs-focus-ring-color: rgba(90, 107, 120, 0.28);
    --bs-primary:      var(--qul-ink);
    --bs-primary-rgb:  26, 26, 26;
    --bs-secondary:    var(--qul-muted);
    --bs-secondary-rgb: 138, 138, 138;
    --bs-success:      var(--qul-success);
    --bs-success-rgb:  63, 107, 79;
    --bs-danger:       var(--qul-danger);
    --bs-danger-rgb:   143, 58, 58;
    --bs-warning:      var(--qul-warning);
    --bs-warning-rgb:  138, 106, 47;
    --bs-info:         var(--qul-slate);
    --bs-info-rgb:     90, 107, 120;
    --bs-light:        var(--qul-soft);
    --bs-dark:         var(--qul-ink);
}

@media (min-width: 768px) {
    :root { --qul-page-pad: var(--qul-space-6); }
}