/* ==========================================================================
   NOTIFORGE — TEMA SİSTEMİ
   Light  : hafif koyu, sıcak krem/taş (göz yormayan)
   Dark   : sıcak, yeşile çalan koyu
   Seçim  : <html data-theme="light|dark">  (js/theme.js yönetir)
   ========================================================================== */
:root,
:root[data-theme="light"] {
    color-scheme: light;

    /* Yüzeyler */
    --bg-primary:   #e5e0d3;   /* sayfa zemini */
    --surface:      #eeeade;   /* kartlar */
    --surface-2:    #e0dbcd;   /* içe gömülü alanlar, chip, input */
    --surface-3:    #d6d0c0;   /* hover / pasif zemin */
    --border:       #d5cfbf;
    --border-strong:#c4bca9;

    /* Metin */
    --text:         #232b32;
    --text-muted:   #5a646c;
    --text-faint:   #878d92;

    /* Marka — orman yeşili */
    --accent:        #2d5a43;  /* dolgu (üstünde beyaz yazı) */
    --accent-hover:  #1c3d2b;
    --accent-text:   #2d5a43;  /* yeşil yazı / ikon */
    --accent-ink:    #1e452e;  /* koyu yeşil başlık yazısı */
    --accent-soft:   #d4dcc9;  /* yeşil tint zemin */
    --accent-soft-2: #c3d0bc;
    --on-accent:     #ffffff;

    /* RGB üçlüleri (rgba(var(--x-rgb), .5) için) */
    --accent-rgb:  45, 90, 67;
    --surface-rgb: 238, 234, 222;
    --bg-rgb:      229, 224, 211;

    --shadow-color: 52, 44, 24;
    --shadow-sm: 0 1px 2px rgba(var(--shadow-color), .08), 0 1px 3px rgba(var(--shadow-color), .06);
    --shadow-md: 0 4px 14px rgba(var(--shadow-color), .10);
    --shadow-lg: 0 14px 40px rgba(var(--shadow-color), .16);

    --overlay: rgba(28, 30, 24, .45);

    /* Anlamsal durum renkleri (sabit hex yerine bunları kullan) */
    --success:      #2f7a52;  --success-rgb: 47, 122, 82;   --success-soft: #d9e8dc;
    --danger:       #b8473b;  --danger-rgb:  184, 71, 59;   --danger-soft:  #f1dcd6;
    --warning:      #a86e14;  --warning-rgb: 168, 110, 20;  --warning-soft: #f1e3c4;
    --info:         #3d6b98;  --info-rgb:    61, 107, 152;  --info-soft:    #d9e3ec;
    --ai:           #6a5a9c;  --ai-rgb:      106, 90, 156;  --ai-soft:      #e3def0;
    --star:         #c99a2e;  /* favori yıldızı */
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --bg-primary:   #111514;
    --surface:      #1a1f1e;
    --surface-2:    #222928;
    --surface-3:    #2b3331;
    --border:       #2a3230;
    --border-strong:#3a4543;

    --text:         #e7ece9;
    --text-muted:   #a0aca7;
    --text-faint:   #6f7b77;

    --accent:        #2f7d58;
    --accent-hover:  #38906a;
    --accent-text:   #5fd39a;
    --accent-ink:    #bfe9d2;
    --accent-soft:   #1d3328;
    --accent-soft-2: #26422f;
    --on-accent:     #ffffff;

    --accent-rgb:  95, 211, 154;
    --surface-rgb: 26, 31, 30;
    --bg-rgb:      17, 21, 20;

    --shadow-color: 0, 0, 0;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
    --shadow-md: 0 4px 16px rgba(0,0,0,.40);
    --shadow-lg: 0 16px 44px rgba(0,0,0,.55);

    --overlay: rgba(0, 0, 0, .62);

    --success:      #4fbf86;  --success-rgb: 79, 191, 134;  --success-soft: #1d3328;
    --danger:       #ec7a6c;  --danger-rgb:  236, 122, 108; --danger-soft:  #3a2220;
    --warning:      #e0a64a;  --warning-rgb: 224, 166, 74;  --warning-soft: #3a2f1c;
    --info:         #82a9d4;  --info-rgb:    130, 169, 212; --info-soft:    #1f2a36;
    --ai:           #a897dd;  --ai-rgb:      168, 151, 221; --ai-soft:      #2a2638;
    --star:         #e0b04a;
}

/* ==========================================================================
   ÖLÇEKLER — köşe, boşluk, yazı, font (temadan bağımsız)
   ========================================================================== */
:root {
    --font-heading: 'Merriweather', Georgia, serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-arabic: 'Amiri', 'Traditional Arabic', 'Scheherazade New', serif;

    /* Köşe yuvarlaklığı */
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 18px;
    --r-xl: 24px;
    --r-pill: 999px;

    /* Boşluk (4px ızgara) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;

    /* Yazı boyutu ölçeği */
    --fs-2xs: 0.6875rem; /* 11px */
    --fs-xs:  0.75rem;   /* 12px */
    --fs-sm:  0.8125rem; /* 13px */
    --fs-md:  0.875rem;  /* 14px */
    --fs-base:1rem;      /* 16px */
    --fs-lg:  1.25rem;   /* 20px */
    --fs-xl:  1.5625rem; /* 25px */
    --fs-2xl: 1.9375rem; /* 31px */
}

/* Eski değişken adlarıyla uyumluluk */
:root {
    --bg-secondary: var(--surface);
    --bg-tertiary:  var(--surface-2);
    --text-primary: var(--text);
    --text-secondary: var(--text-muted);
    --forest:       var(--accent);
    --card-bg:      var(--surface);
}

/* Tema geçişi yumuşak olsun (ilk yüklemede değil) */
html.theme-ready body,
html.theme-ready .card,
html.theme-ready header,
html.theme-ready nav,
html.theme-ready input,
html.theme-ready textarea,
html.theme-ready button {
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Form kontrolleri ve placeholder */
::placeholder { color: var(--text-faint); opacity: 1; }
:root[data-theme="dark"] img:not([src$=".svg"]):not(.no-dim) { filter: brightness(.92) contrast(1.02); }
:root[data-theme="dark"] ::selection { background: rgba(var(--accent-rgb), .35); }
:root[data-theme="light"] ::selection { background: rgba(var(--accent-rgb), .22); }

/* İnce, temaya uyumlu kaydırma çubuğu */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
*::-webkit-scrollbar-track { background: transparent; }

/* Tema seçici (profil) */
.theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.theme-opt {
    display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px;
    padding: 0 8px; min-height: 44px; border-radius: var(--r-md); cursor: pointer;
    background: var(--surface-2); border: 1.5px solid var(--border);
    color: var(--text-muted); font-weight: 700; font-size: .82rem;
    transition: border-color .2s ease, background .2s ease;
}
.theme-opt:hover { border-color: var(--border-strong); }
.theme-opt.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.theme-opt .theme-swatch { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 1px solid var(--border-strong); display: block; }
.theme-swatch.sw-light { background: linear-gradient(135deg, #e5e0d3 50%, #eeeade 50%); }
.theme-swatch.sw-dark  { background: linear-gradient(135deg, #111514 50%, #1a1f1e 50%); }
.theme-swatch.sw-auto  { background: linear-gradient(135deg, #e5e0d3 50%, #111514 50%); }

/* ==========================================================================
   GÖRSEL CİLA — yumuşak gölgeler, odak halkası, hafif hareket
   ========================================================================== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

.card, .lib-note-card, .lib-folder-card, .empty-state-container {
    box-shadow: var(--shadow-sm);
}
@media (hover: hover) {
    .lib-note-card, .card { transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease; }
    .lib-note-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
}
.lib-note-card:active { transform: scale(.992); }

:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
    border-radius: 8px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* Modal / sheet arka plan perdesi tema ile uyumlu */
.modal-overlay { background-color: var(--overlay); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   SADE NOT KARTLARI — başlık + kısa açıklama
   ========================================================================== */
.lib-card-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.lib-card-title { margin-bottom: 4px; }
.feed-avatar-circle svg { display: block; }
.feed-card-title { overflow: hidden; text-overflow: ellipsis; }