/* ==========================================================================
   Tasarım token'ları — E-Ticaret Paneli
   Tek kaynak: renk, tipografi, aralık, yarıçap, gölge, hareket.
   Laravel fazında bu dosya olduğu gibi taşınır (Tailwind @theme girdisi olur).
   ========================================================================== */

:root {
  /* ---- Ham palet: nötr -------------------------------------------------- */
  --n-0:   #ffffff;
  --n-25:  #fbfcfd;
  --n-50:  #f5f6f8;
  --n-100: #eceef2;
  --n-150: #e3e6eb;
  --n-200: #d7dbe2;
  --n-300: #bfc5cf;
  --n-400: #949cab;
  --n-500: #697283;
  --n-600: #4c5462;
  --n-700: #39404d;
  --n-800: #262b35;
  --n-900: #171a21;
  --n-950: #0e1015;

  /* ---- Ham palet: vurgu (indigo) ---------------------------------------- */
  --a-50:  #eef0fe;
  --a-100: #e0e3fd;
  --a-200: #c6c9fb;
  --a-300: #a3a5f7;
  /* Nuwork marka altını (logodan örneklendi) — panelin vurgu rengi */
  --a-400: #e0b45c;
  --a-500: #d8a236;
  --a-600: #b8862a;
  --a-700: #3730a3;
  --a-800: #2f2a85;
  --a-900: #29256b;

  /* ---- Ham palet: durum -------------------------------------------------- */
  --ok-50:  #e9f7f0;  --ok-500:  #0e9f6e;  --ok-700:  #05704c;
  --wn-50:  #fdf3e7;  --wn-500:  #b45309;  --wn-700:  #8a3f07;
  --dn-50:  #fdedec;  --dn-500:  #dc2626;  --dn-700:  #a51b1b;
  --in-50:  #e8f3fb;  --in-500:  #0284c7;  --in-700:  #04628f;

  /* ---- Anlamsal: yüzey & metin (açık tema) ------------------------------ */
  --bg:            var(--n-50);
  --surface:       var(--n-0);
  --surface-soft:  var(--n-25);
  --surface-sunk:  var(--n-100);
  --border:        var(--n-150);
  --border-strong: var(--n-200);
  --text:          var(--n-900);
  --text-soft:     var(--n-600);
  --text-muted:    var(--n-500);
  --text-faint:    var(--n-400);

  /* ---- Anlamsal: vurgu -------------------------------------------------- */
  --accent:          var(--a-500);
  --accent-hover:    var(--a-600);
  --accent-active:   var(--a-700);
  --accent-soft:     var(--a-50);
  --accent-soft-brd: var(--a-200);
  --accent-on:       #ffffff;
  --ring:            rgba(79, 70, 229, 0.28);


  /* ---- Liste satırı (zebra) — ton farkı çok az tutuldu -------------------- */
  --row-alt:   rgba(17, 24, 39, 0.018);
  --row-hover: var(--n-100);

  /* ---- Anlamsal: durum -------------------------------------------------- */
  --ok:   var(--ok-500);   --ok-bg:   var(--ok-50);   --ok-text:   var(--ok-700);
  --warn: var(--wn-500);   --warn-bg: var(--wn-50);   --warn-text: var(--wn-700);
  --danger: var(--dn-500); --danger-bg: var(--dn-50); --danger-text: var(--dn-700);
  --info: var(--in-500);   --info-bg: var(--in-50);   --info-text: var(--in-700);


  /* ---- Modül renkleri -----------------------------------------------------
     Süs değil işaret: göz aradığı bölümü renkten buluyor. Sarı/altın YOK. */
  --t-indigo:  #4f46e5;  --t-indigo-bg:  rgba(79, 70, 229, 0.10);
  --t-green:   #0e9f6e;  --t-green-bg:   rgba(14, 159, 110, 0.11);
  --t-blue:    #0284c7;  --t-blue-bg:    rgba(2, 132, 199, 0.11);
  --t-rose:    #e11d48;  --t-rose-bg:    rgba(225, 29, 72, 0.10);
  --t-violet:  #7c3aed;  --t-violet-bg:  rgba(124, 58, 237, 0.10);
  --t-teal:    #0d9488;  --t-teal-bg:    rgba(13, 148, 136, 0.11);
  --t-orange:  #ea580c;  --t-orange-bg:  rgba(234, 88, 12, 0.10);
  --t-slate:   #475569;  --t-slate-bg:   rgba(71, 85, 105, 0.10);

  /* ---- Anlamsal: sol menü (her iki temada da koyu) ---------------------- */
  --side-bg:        #2c2d31;
  --side-bg-soft:   #1b1e26;
  --side-border:    rgba(255, 255, 255, 0.07);
  --side-text:      #c7ccd6;
  --side-text-dim:  #7b8395;
  --side-title:     #5f6779;
  --side-hover:     rgba(255, 255, 255, 0.055);
  --side-active:    rgba(99, 102, 241, 0.16);
  --side-active-tx: #ffffff;

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

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: 25px;
  --fs-3xl: 31px;

  --lh-tight: 1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --track-tight: -0.011em;
  --track-caps:  0.06em;

  /* ---- Aralık (4'lük ölçek) --------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-8: 32px;  --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* ---- Yarıçap (üç kademe — karışık ölçek yok) -------------------------- */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ---- Gölge (çok hafif; çerçeve ağırlıklı tasarım) --------------------- */
  --sh-xs: 0 1px 2px rgba(16, 20, 28, 0.05);
  --sh-sm: 0 1px 3px rgba(16, 20, 28, 0.07), 0 1px 2px rgba(16, 20, 28, 0.04);
  --sh-md: 0 6px 16px -4px rgba(16, 20, 28, 0.1), 0 2px 6px rgba(16, 20, 28, 0.05);
  --sh-lg: 0 18px 40px -12px rgba(16, 20, 28, 0.22), 0 4px 12px rgba(16, 20, 28, 0.07);

  /* ---- Hareket ---------------------------------------------------------- */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur:       180ms;
  --dur-slow:  280ms;

  /* ---- Katman ----------------------------------------------------------- */
  --z-side:    30;
  --z-topbar:  40;
  --z-dropdown:60;
  --z-drawer:  70;
  --z-modal:   80;
  --z-toast:   90;
  --z-cmdk:    100;
  --z-tooltip: 110;   /* her şeyin üstünde — balon hiçbir kutuda kaybolmasın */

  /* ---- Ölçüler ---------------------------------------------------------- */
  --side-w:      264px;
  --side-w-mini: 72px;
  --topbar-h:    60px;
  --page-max:    1440px;
}

/* ==========================================================================
   Koyu tema
   ========================================================================== */
[data-theme="dark"] {
  --bg:            #0d0f14;
  --surface:       #14171e;
  --surface-soft:  #171b23;
  --surface-sunk:  #1c212a;
  --border:        #252b36;
  --border-strong: #313847;
  --text:          #e7eaf0;
  --text-soft:     #a8b0bf;
  --text-muted:    #858d9c;
  --text-faint:    #666e7d;

  --accent:          #b8862a;
  --accent-hover:    #7d78f2;
  --accent-active:   #8f8bf5;
  --accent-soft:     rgba(109, 103, 238, 0.14);
  --accent-soft-brd: rgba(109, 103, 238, 0.32);
  --ring:            rgba(109, 103, 238, 0.36);
  --row-alt:   rgba(255, 255, 255, 0.022);
  --row-hover: rgba(255, 255, 255, 0.05);

  --t-indigo:  #8b86f5;  --t-indigo-bg:  rgba(139, 134, 245, 0.16);
  --t-green:   #34c48b;  --t-green-bg:   rgba(52, 196, 139, 0.16);
  --t-blue:    #56b3e8;  --t-blue-bg:    rgba(86, 179, 232, 0.16);
  --t-rose:    #f4707f;  --t-rose-bg:    rgba(244, 112, 127, 0.16);
  --t-violet:  #a78bfa;  --t-violet-bg:  rgba(167, 139, 250, 0.16);
  --t-teal:    #2dd4bf;  --t-teal-bg:    rgba(45, 212, 191, 0.16);
  --t-orange:  #fb923c;  --t-orange-bg:  rgba(251, 146, 60, 0.16);
  --t-slate:   #94a3b8;  --t-slate-bg:   rgba(148, 163, 184, 0.16);



  --ok:   #34c48b;  --ok-bg:   rgba(52, 196, 139, 0.13);  --ok-text:   #5fd6a6;
  --warn: #e0a04a;  --warn-bg: rgba(224, 160, 74, 0.13);  --warn-text: #ecb76e;
  --danger: #f0625d; --danger-bg: rgba(240, 98, 93, 0.13); --danger-text: #f5837f;
  --info: #43a7e0;  --info-bg: rgba(67, 167, 224, 0.13);  --info-text: #6bbce8;

  --side-bg:      #2c2d31;
  --side-bg-soft: #11141a;
  --side-border:  rgba(255, 255, 255, 0.06);

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --sh-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55);
  --sh-lg: 0 18px 40px -12px rgba(0, 0, 0, 0.7);
}

/* Sistem tercihi — kullanıcı elle seçmediyse */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0d0f14;
    --surface:       #14171e;
    --surface-soft:  #171b23;
    --surface-sunk:  #1c212a;
    --border:        #252b36;
    --border-strong: #313847;
    --text:          #e7eaf0;
    --text-soft:     #a8b0bf;
    --text-muted:    #858d9c;
    --text-faint:    #666e7d;
    --accent:          #b8862a;
    --accent-hover:    #7d78f2;
    --accent-active:   #8f8bf5;
    --accent-soft:     rgba(109, 103, 238, 0.14);
    --accent-soft-brd: rgba(109, 103, 238, 0.32);
    --ring:            rgba(109, 103, 238, 0.36);
  --row-alt:   rgba(255, 255, 255, 0.022);
  --row-hover: rgba(255, 255, 255, 0.05);

  --t-indigo:  #8b86f5;  --t-indigo-bg:  rgba(139, 134, 245, 0.16);
  --t-green:   #34c48b;  --t-green-bg:   rgba(52, 196, 139, 0.16);
  --t-blue:    #56b3e8;  --t-blue-bg:    rgba(86, 179, 232, 0.16);
  --t-rose:    #f4707f;  --t-rose-bg:    rgba(244, 112, 127, 0.16);
  --t-violet:  #a78bfa;  --t-violet-bg:  rgba(167, 139, 250, 0.16);
  --t-teal:    #2dd4bf;  --t-teal-bg:    rgba(45, 212, 191, 0.16);
  --t-orange:  #fb923c;  --t-orange-bg:  rgba(251, 146, 60, 0.16);
  --t-slate:   #94a3b8;  --t-slate-bg:   rgba(148, 163, 184, 0.16);


    --ok:   #34c48b;  --ok-bg:   rgba(52, 196, 139, 0.13);  --ok-text:   #5fd6a6;
    --warn: #e0a04a;  --warn-bg: rgba(224, 160, 74, 0.13);  --warn-text: #ecb76e;
    --danger: #f0625d; --danger-bg: rgba(240, 98, 93, 0.13); --danger-text: #f5837f;
    --info: #43a7e0;  --info-bg: rgba(67, 167, 224, 0.13);  --info-text: #6bbce8;
    --side-bg:      #2c2d31;
    --side-bg-soft: #11141a;
  }
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}