/* ==========================================================================
   PERA FESTIVAL — DESIGN TOKENS
   tokens.css · primitive + semantic + component değişkenleri
   Faz 1.5 UI/UX spesifikasyonuna göre.
   ========================================================================== */

:root {
  /* ---------- INK (sıcak nötr omurga) ---------- */
  --ink-950: #0A0B0D;
  --ink-925: #0F1114;
  --ink-900: #14161A;
  --ink-850: #191C21;
  --ink-800: #1F2329;
  --ink-750: #262B32;
  --ink-700: #2E333B;
  --ink-600: #454B55;
  --ink-500: #646B77;
  --ink-400: #8A919C;
  --ink-300: #B4BAC3;
  --ink-200: #D6DAE0;
  --ink-150: #E4E7EB;
  --ink-100: #EFF1F4;
  --ink-50:  #F7F8FA;
  --ink-0:   #FFFFFF;

  /* ---------- BRASS / GOLD (Pera kurumsal vurgu) ---------- */
  --brass-50:  #FBF6EC;
  --brass-100: #F3E7CD;
  --brass-200: #E7D2A4;
  --brass-300: #D9BB78;
  --brass-400: #CBA85A;
  --brass-500: #BE9542;   /* ana vurgu */
  --brass-600: #A67C31;
  --brass-700: #866225;   /* PF-100 — eski değer 8 haneli (#86622513 → alfa %7) idi; metni görünmez yapıyordu */
  --brass-700s:#866225;
  --brass-800: #63481B;

  /* ---------- DURUM ---------- */
  --success-700: #14603A; --success-600: #1B7F4B; --success-200: #BFE7D2; --success-100: #E3F5EB;
  --warning-700: #8A5709; --warning-600: #B5730B; --warning-200: #F7DFB5; --warning-100: #FDF3E2;
  --danger-700:  #8C1A12; --danger-600:  #B42318; --danger-200:  #F7CFCB; --danger-100:  #FDECEA;
  --info-700:    #17568A; --info-600:    #1F6FB2; --info-200:    #C2DDF2; --info-100:    #E8F2FA;

  /* ---------- FESTİVAL TEMASI (varsayılan: Piyano) ---------- */
  --festival-primary: #1B6B45;
  --festival-primary-strong: #145636;
  --festival-primary-soft: rgba(27, 107, 69, .08);
  --festival-on-primary: #FFFFFF;
  --festival-ring: rgba(27, 107, 69, .35);

  /* ---------- TİPOGRAFİ ---------- */
  --font-display: "Fraunces", "Newsreader", Georgia, "Times New Roman", serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: clamp(2.5rem, 1.6rem + 4.2vw, 4.75rem);
  --fs-display-lg: clamp(2.125rem, 1.5rem + 2.8vw, 3.5rem);
  --fs-display-md: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-h1: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-h2: clamp(1.3125rem, 1.13rem + .75vw, 1.75rem);
  --fs-h3: clamp(1.125rem, 1.04rem + .35vw, 1.375rem);
  --fs-h4: clamp(1rem, .96rem + .18vw, 1.125rem);
  --fs-body-lg: clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --fs-body: clamp(.9375rem, .92rem + .1vw, 1rem);
  --fs-body-sm: clamp(.875rem, .86rem + .08vw, .9375rem);
  --fs-caption: clamp(.8125rem, .8rem + .06vw, .875rem);
  --fs-micro: .75rem;

  /* ---------- BOŞLUK ---------- */
  --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-32: 128px;

  /* ---------- YARIÇAP ---------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px;
  --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;

  /* ---------- GÖLGE ---------- */
  --shadow-xs: 0 1px 2px rgba(10,11,13,.05);
  --shadow-sm: 0 1px 3px rgba(10,11,13,.08), 0 1px 2px rgba(10,11,13,.04);
  --shadow-md: 0 4px 12px rgba(10,11,13,.08), 0 2px 4px rgba(10,11,13,.04);
  --shadow-lg: 0 12px 32px rgba(10,11,13,.12), 0 4px 8px rgba(10,11,13,.06);
  --shadow-xl: 0 24px 64px rgba(10,11,13,.16), 0 8px 16px rgba(10,11,13,.08);
  --shadow-drag: 0 16px 40px rgba(10,11,13,.20);

  /* ---------- KENARLIK ---------- */
  --border-subtle: 1px solid var(--ink-150);
  --border-default: 1px solid var(--ink-200);
  --border-strong: 1px solid var(--ink-300);
  --ring: 0 0 0 2px var(--ink-0), 0 0 0 4px var(--festival-ring);

  /* ---------- HAREKET ---------- */
  --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 180ms;
  --dur-medium: 240ms; --dur-slow: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- Z ---------- */
  --z-sticky: 10; --z-stickybar: 20; --z-dropdown: 30; --z-drawer: 40;
  --z-modal: 50; --z-toast: 60; --z-palette: 70; --z-drag: 80; --z-system: 100;

  /* ---------- GENİŞLİK ---------- */
  --w-prose: 68ch; --w-form: 560px; --w-narrow: 800px; --w-wide: 1320px;

  /* ==========================================================================
     SEMANTİK TEMA KATMANI (Rev.6)
     Bileşenler ARTIK doğrudan ink/beyaz kullanmaz; bu semantik tokenleri
     kullanır. Dark tema yalnızca bu katmanı yeniden tanımlar — bileşen CSS'i
     tek satır bile değişmeden iki temada da doğru çalışır.
     ========================================================================== */
  --bg:          var(--ink-50);   /* sayfa zemini */
  --surface:     var(--ink-0);    /* kart · panel · modal yüzeyi */
  --surface-1:   var(--ink-0);    /* --surface eşanlamlısı (geriye uyum) */
  --surface-2:   var(--ink-50);   /* hafif yükseltilmiş / ikincil zemin */
  --surface-3:   var(--ink-100);  /* girinti · başlık şeridi */
  --text:        var(--ink-900);
  --text-2:      var(--ink-600);
  /* PF-100 — #8A919C beyazda 3.18:1 idi (AA değil). #6A717D: beyaz 4.92:1 · --bg 4.63:1 */
  --text-dim:    #6A717D;
  /* PF-100 — .eyebrow metni: pirinç #BE9542 beyazda 2.78:1 → koyu pirinç #866225 beyaz 5.54:1 · --bg 5.22:1.
     Koyu zeminli bölümler (hero, footer, cta…) public.css'te --eyebrow-fg'yi açık pirince döndürür. */
  --eyebrow-fg:  #866225;
  --border-c:       var(--ink-200);
  --border-c-soft:  var(--ink-150);
  --border-c-strong:var(--ink-300);
  --chip-bg:     var(--ink-900);  /* koyu çip/rozet zemini (ters kontrast) */
  --chip-fg:     #FFFFFF;
  --overlay:     rgba(14, 16, 19, .52);
  --surface-glass: rgba(255, 255, 255, .96);  /* yapışkan başlık şeritleri */
  --accent:        var(--festival-primary);
  --accent-hover:  var(--festival-primary-strong);
  --accent-soft:   var(--festival-primary-soft);
  --accent-on:     var(--festival-on-primary);
  --shadow-color: 210 12% 12%;
  --badge-live-bg: var(--success-600); --badge-live-fg: #FFFFFF;

  /* ---------- SEMANTİK (eski adlar — korunuyor) ---------- */
  --surface-page: var(--surface);
  --surface-raised: var(--surface-2);
  --text-primary: var(--text);
  --text-secondary: var(--ink-500);
  --text-muted: var(--text-dim);

  /* ==========================================================================
     FAZ 61 — TEMA YÖNETİM SİSTEMİ İÇİN EK TOKEN'LAR
     Bu bölüm YALNIZCA EKLEME içerir; yukarıdaki hiçbir token DEĞİŞMEDİ.
     Her yeni token, mevcut görünümü BİREBİR koruyan bir VARSAYILANA sahiptir —
     bir tema aktif olmadığı sürece (veya admin panelinde) public.css/base.css/
     components.css'teki tüketim noktaları tamamen aynı değerleri üretir.
     Aktif bir tema yalnızca public sayfalarda enjekte edilen ayrı bir
     `:root:not([data-theme="dark"])` katmanıyla bu token'ları YENİDEN TANIMLAR
     (bkz. assets/js/site-settings.js → S.applyTheme) — Açık/Koyu sistemi
     (yukarıdaki [data-theme="dark"] bloğu) hiç değişmedi/dokunulmadı.
     ========================================================================== */
  --color-secondary: var(--brass-500);
  --color-accent-badge: #4ADE80;
  --font-ui-chrome: var(--font-ui);
  --fs-nav: clamp(12.5px, .95vw, 14px);
  --fs-btn: var(--fs-body-sm);
  --fw-heading: 650;
  --fw-body: 400;
  --fw-nav: 500;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);
  --space-container: var(--space-4);
  --space-card: var(--space-5);
  --space-element: var(--space-3);
  --radius-btn: var(--radius-sm);
  --radius-input: var(--radius-sm);
  --radius-image: var(--radius-lg);
  --shadow-btn: none;
  --btn-bg: var(--festival-primary);
  --btn-fg: var(--festival-on-primary);
  --btn-bg-hover: var(--festival-primary-strong);
  --btn-px: var(--space-4);
  --header-bg: var(--surface-glass);
  --header-fg: var(--ink-900);
  --header-h: 76px;
  --logo-size: 40px;
  --nav-gap: clamp(7px, .78vw, 14px);
  --footer-bg: var(--ink-950);
  --footer-fg: rgba(255,255,255,.72);
  --footer-pt: var(--space-16);
}

/* ==========================================================================
   DARK TEMA
   Siyah zemin değil: sıcak-nötr, editoryal, kültür kurumu tonu.
   Yüzeyler kademeli (bg < surface < surface-2 < surface-3), kenarlıklar
   görünür ama gürültüsüz, metin kontrastı WCAG AA hedefli.
   ========================================================================== */
[data-theme="dark"] {
  --bg:        #0E1013;
  --surface:   #16191E;
  --surface-1: #16191E;
  --surface-2: #1B1F26;
  --surface-3: #232830;
  --text:      #E9ECF1;   /* #16191E üzerinde ~13.9:1 */
  --text-2:    #AEB6C2;   /* ~7.6:1 */
  --text-dim:  #848C99;   /* ~4.8:1 */
  --eyebrow-fg: var(--brass-500);   /* #BE9542 · --bg üzerinde 6.87:1 */
  --border-c:        #2E343E;
  --border-c-soft:   #252A32;
  --border-c-strong: #3A424E;
  /* Koyu çip her iki temada da KOYU kalır — tüm kullanıcıları (bulkbar,
     total-box, tooltip, görsel kartlar) beyaz metin varsayar. Koyu temada
     yüzeyden ayrışsın diye bir tık açılır. */
  --chip-bg:   #2A3039;
  --chip-fg:   #FFFFFF;
  --overlay:   rgba(4, 6, 9, .68);
  --surface-glass: rgba(20, 23, 28, .94);
  --shadow-color: 220 40% 2%;

  /* Kenarlık bileşik tokenleri */
  --border-subtle:  1px solid var(--border-c-soft);
  --border-default: 1px solid var(--border-c);
  --border-strong:  1px solid var(--border-c-strong);

  /* Metin/kenarlık amaçlı ink değerleri — koyu temada aydınlatılır.
     ink-950 sidebar zemini olduğu için KOYU kalır. */
  --ink-0:   #16191E;
  --ink-50:  #1B1F26;
  --ink-100: #232830;
  --ink-150: #252A32;
  --ink-200: #2E343E;
  --ink-300: #3A424E;
  --ink-400: #848C99;
  --ink-500: #98A0AC;
  --ink-600: #AEB6C2;
  --ink-700: #C6CCD5;
  --ink-750: #D2D7DE;
  --ink-800: #DDE1E7;
  --ink-850: #E3E7EC;
  --ink-900: #E9ECF1;
  --ink-925: #0B0D10;   /* yalnızca zemin — koyu kalır */
  --ink-950: #0A0C0F;

  /* Yumuşak durum tonları koyu zeminde ters çevrilir */
  --success-100: #10251A; --success-200: #1C4030; --success-600: #4FBE86; --success-700: #7ED6A9;
  --warning-100: #2A1F0C; --warning-200: #4A3813; --warning-600: #E0A93C; --warning-700: #F0C878;
  --danger-100:  #2A1210; --danger-200:  #4A211D; --danger-600:  #F0736A; --danger-700:  #F79E98;
  --info-100:    #0F1E2C; --info-200:    #1B3852; --info-600:    #58A8E0; --info-700:    #8CC6EE;
  --brass-50:    #241D0F; --brass-100:   #3A2E17;
  --badge-live-bg: #1D7A4E; --badge-live-fg: #FFFFFF;

  color-scheme: dark;
}

/* ---------- FESTİVAL TEMALARI ---------- */
[data-festival="piyano"]    { --festival-primary:#1B6B45; --festival-primary-strong:#145636; --festival-primary-soft:rgba(27,107,69,.08);  --festival-ring:rgba(27,107,69,.35);  --festival-on-primary:#fff; }
[data-festival="koro"]      { --festival-primary:#7A3B9E; --festival-primary-strong:#632F81; --festival-primary-soft:rgba(122,59,158,.08); --festival-ring:rgba(122,59,158,.35); --festival-on-primary:#fff; }
[data-festival="muzik"]     { --festival-primary:#1454A0; --festival-primary-strong:#0F4382; --festival-primary-soft:rgba(20,84,160,.08);  --festival-ring:rgba(20,84,160,.35);  --festival-on-primary:#fff; }
[data-festival="perkusyon"] { --festival-primary:#0F5FA8; --festival-primary-strong:#0C4C87; --festival-primary-soft:rgba(15,95,168,.08);  --festival-ring:rgba(15,95,168,.35);  --festival-on-primary:#fff; }
[data-festival="resim"]     { --festival-primary:#3F5A73; --festival-primary-strong:#32485C; --festival-primary-soft:rgba(63,90,115,.08);  --festival-ring:rgba(63,90,115,.35);  --festival-on-primary:#fff; }
[data-festival="masal"]     { --festival-primary:#C2427D; --festival-primary-strong:#9E3565; --festival-primary-soft:rgba(194,66,125,.08); --festival-ring:rgba(194,66,125,.35); --festival-on-primary:#fff; }
[data-festival="flamenko"]  { --festival-primary:#B4232E; --festival-primary-strong:#921C25; --festival-primary-soft:rgba(180,35,46,.08);  --festival-ring:rgba(180,35,46,.35);  --festival-on-primary:#fff; }
[data-festival="kostum"]    { --festival-primary:#C0202F; --festival-primary-strong:#9B1A26; --festival-primary-soft:rgba(192,32,47,.08);  --festival-ring:rgba(192,32,47,.35);  --festival-on-primary:#fff; }
[data-festival="tasarim"]   { --festival-primary:#C86A00; --festival-primary-strong:#A25600; --festival-primary-soft:rgba(200,106,0,.08);  --festival-ring:rgba(200,106,0,.35);  --festival-on-primary:#14161A; }
[data-festival="brass"]     { --festival-primary:#A67C31; --festival-primary-strong:#866225; --festival-primary-soft:rgba(166,124,49,.10); --festival-ring:rgba(190,149,66,.40); --festival-on-primary:#14161A; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: .01ms; --dur-fast: .01ms; --dur-base: .01ms;
    --dur-medium: .01ms; --dur-slow: .01ms;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}