/* ==========================================================================
   BEF Acco — Tasarım değişkenleri (design tokens)

   Tek doğruluk kaynağı. Hiçbir bileşen dosyasında ham renk kodu, ham piksel
   ölçüsü veya ham geçiş süresi yazılmaz; hepsi buradan okunur. Tutarlılık
   böyle sağlanır: bir değeri burada değiştirmek tüm panele yansır.

   Palet: nötr gri skala üzerine tek vurgu rengi (siyah). Renk yalnızca
   anlam taşıdığı yerde kullanılır — durum bildirimi, para yönü, uyarı.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- */
  /*  Nötr skala — arayüzün iskeleti                                    */
  /* ---------------------------------------------------------------- */
  --gray-0:   #FFFFFF;
  --gray-25:  #FCFCFD;
  --gray-50:  #FAFAFA;
  --gray-100: #F4F4F5;
  --gray-150: #ECECEE;
  --gray-200: #E4E4E7;
  --gray-300: #D4D4D8;
  --gray-400: #A1A1AA;
  --gray-500: #71717A;
  --gray-600: #52525B;
  --gray-700: #3F3F46;
  --gray-800: #27272A;
  --gray-900: #18181B;
  --gray-950: #09090B;

  /* ---------------------------------------------------------------- */
  /*  Anlamsal yüzeyler                                                 */
  /* ---------------------------------------------------------------- */
  --bg:              var(--gray-50);      /* sayfa zemini */
  --bg-elevated:     var(--gray-0);       /* kart, panel */
  --bg-sunken:       var(--gray-100);     /* girintili alan, tablo başlığı */
  --bg-hover:        var(--gray-100);
  --bg-active:       var(--gray-150);
  --bg-inverse:      var(--gray-950);

  --border:          var(--gray-200);
  --border-subtle:   var(--gray-150);
  --border-strong:   var(--gray-300);
  --border-focus:    var(--gray-950);

  /* ---------------------------------------------------------------- */
  /*  Metin                                                             */
  /* ---------------------------------------------------------------- */
  --text:            var(--gray-950);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-500);
  --text-subtle:     var(--gray-400);
  --text-inverse:    var(--gray-0);
  --text-link:       var(--gray-950);

  /* ---------------------------------------------------------------- */
  /*  Vurgu — siyah. Renk gürültüsü yaratmadan hiyerarşi kurar.        */
  /* ---------------------------------------------------------------- */
  --accent:          var(--gray-950);
  --accent-hover:    var(--gray-800);
  --accent-active:   var(--gray-700);
  --accent-fg:       var(--gray-0);
  --accent-subtle:   var(--gray-100);

  /* ---------------------------------------------------------------- */
  /*  Durum renkleri — yalnızca anlam taşıdığında                      */
  /* ---------------------------------------------------------------- */
  --success:         #15803D;
  --success-bg:      #F0FDF4;
  --success-border:  #BBF7D0;
  --success-solid:   #16A34A;

  --warning:         #B45309;
  --warning-bg:      #FFFBEB;
  --warning-border:  #FDE68A;
  --warning-solid:   #F59E0B;

  --danger:          #B91C1C;
  --danger-bg:       #FEF2F2;
  --danger-border:   #FECACA;
  --danger-solid:    #DC2626;

  --info:            #1D4ED8;
  --info-bg:         #EFF6FF;
  --info-border:     #BFDBFE;
  --info-solid:      #2563EB;

  /* ---------------------------------------------------------------- */
  /*  Para yönü — muhasebe panelinin en sık okunan sinyali             */
  /* ---------------------------------------------------------------- */
  --income:          #15803D;   /* gelir, tahsilat */
  --income-bg:       #F0FDF4;
  --expense:         #B91C1C;   /* gider, ödeme */
  --expense-bg:      #FEF2F2;
  --neutral-amount:  var(--gray-700);

  /* ---------------------------------------------------------------- */
  /*  Tipografi                                                         */
  /* ---------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Menlo, Consolas, monospace;

  /* Panel arayüzü için 14px taban — masaüstü yoğunluğuna uygun */
  --text-2xs:  0.6875rem;  /* 11px — etiket, rozet */
  --text-xs:   0.75rem;    /* 12px — yardımcı metin */
  --text-sm:   0.8125rem;  /* 13px — tablo, ikincil */
  --text-base: 0.875rem;   /* 14px — gövde */
  --text-md:   0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px — kart başlığı */
  --text-xl:   1.25rem;    /* 20px — sayfa başlığı */
  --text-2xl:  1.5rem;     /* 24px — KPI değeri */
  --text-3xl:  1.875rem;   /* 30px — büyük rakam */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Rakamların hizalı görünmesi için — para sütunlarında şart */
  --numeric: "tnum" 1, "lnum" 1;

  /* ---------------------------------------------------------------- */
  /*  Boşluk — 4px tabanlı ölçek                                       */
  /* ---------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* ---------------------------------------------------------------- */
  /*  Köşe yarıçapı                                                     */
  /* ---------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------- */
  /*  Gölge — çok hafif. Derinlik ağırlıkla değil, kenarlıkla kurulur. */
  /* ---------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px 0 rgb(9 9 11 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(9 9 11 / 0.06), 0 1px 2px -1px rgb(9 9 11 / 0.04);
  --shadow:    0 4px 12px -2px rgb(9 9 11 / 0.08), 0 2px 4px -2px rgb(9 9 11 / 0.04);
  --shadow-md: 0 8px 24px -4px rgb(9 9 11 / 0.10), 0 4px 8px -4px rgb(9 9 11 / 0.05);
  --shadow-lg: 0 16px 40px -8px rgb(9 9 11 / 0.14), 0 6px 12px -6px rgb(9 9 11 / 0.06);

  /* Odak halkası — klavye erişilebilirliği için görünür olmalı */
  --ring:       0 0 0 3px rgb(9 9 11 / 0.10);
  --ring-danger: 0 0 0 3px rgb(220 38 38 / 0.14);

  /* ---------------------------------------------------------------- */
  /*  Hareket                                                           */
  /* ---------------------------------------------------------------- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration:        180ms;
  --duration-slow:   280ms;

  --transition-colors: color var(--duration-fast) var(--ease),
                       background-color var(--duration-fast) var(--ease),
                       border-color var(--duration-fast) var(--ease);
  --transition-all:    all var(--duration) var(--ease);

  /* ---------------------------------------------------------------- */
  /*  Ölçüler                                                           */
  /* ---------------------------------------------------------------- */
  --sidebar-width:          248px;
  --sidebar-width-collapsed: 60px;
  --topbar-height:          56px;
  --content-max:            1440px;

  /* Form sayfalarının genişliği. Öncesinde her formda ayrı bir sabit vardı
     (640, 720, 760, 780, 820, 860, 880) — aynı işin sekiz farklı ölçüsü.
     Tam genişlik bilinçli olarak kullanılmıyor: 1500px'e yayılan bir form
     hem göz gezdirmeyi zorlaştırır hem alanları saçma biçimde uzatır. */
  --form-max:               880px;

  --control-height-sm: 30px;
  --control-height:    36px;
  --control-height-lg: 42px;

  /* ---------------------------------------------------------------- */
  /*  Katman sırası                                                     */
  /* ---------------------------------------------------------------- */
  --z-base:     1;
  --z-sticky:   10;
  --z-sidebar:  20;
  --z-topbar:   30;
  --z-dropdown: 40;
  --z-overlay:  50;
  --z-modal:    60;
  --z-popover:  65;   /* modal üstünde açılan liste (seçim kutusu) */
  --z-toast:    70;
  --z-tooltip:  80;
}