/* ==========================================================================
   variables.css — TASARIM TOKEN'LARI
   Bu dosyada SADECE custom property tanımı bulunur. Kural gereği başka
   hiçbir selector/stil buraya yazılmaz.
   ========================================================================== */

:root {
  /* ---- Ölçüler ---- */
  --x-sidebar-w:       260px;
  --x-sidebar-mini-w:   68px;
  --x-flyout-w:        224px;
  --x-topbar-h:         60px;

  /* ---- Köşe yarıçapları ---- */
  --x-radius-xs:   6px;
  --x-radius-sm:   9px;
  --x-radius:     12px;
  --x-radius-lg:  16px;
  --x-radius-pill: 999px;

  /* ---- Boşluklar ---- */
  --x-gap-1:  4px;
  --x-gap-2:  8px;
  --x-gap-3: 12px;
  --x-gap-4: 16px;
  --x-gap-5: 24px;
  --x-gap-6: 32px;

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

  --x-fs-xs:   .62rem;
  --x-fs-sm:   .70rem;
  --x-fs-md:   .78rem;
  --x-fs-base: .84rem;
  --x-fs-lg:  1.00rem;
  --x-fs-xl:  1.30rem;
  --x-fs-2xl: 1.70rem;

  /* ---- Geçişler ---- */
  --x-tr:      .22s ease;
  --x-tr-fast: .15s ease;

  /* ---- Katmanlar ---- */
  --x-z-flyout:   298;
  --x-z-overlay:  299;
  --x-z-sidebar:  300;
  --x-z-topbar:   200;
  --x-z-dropdown: 400;
  --x-z-loader:  9999;
}

/* ==========================  DARK (varsayılan)  ========================== */
[data-theme="dark"] {
  --x-bg:         #080f1a;
  --x-bg-2:       #0c1524;
  --x-surface:    #111e30;
  --x-surface-2:  #162438;
  --x-sidebar-bg: #090f1d;
  --x-topbar-bg:  rgba(8, 15, 26, .88);
  --x-overlay:    rgba(4, 9, 18, .72);

  --x-border:   rgba(0, 200, 224, .10);
  --x-border-2: rgba(0, 200, 224, .22);

  --x-text:    #c8e6f4;
  --x-text-2:  #6b8fa8;
  --x-text-3:  #8cb9db;

  --x-accent:   #00c8e0;
  --x-accent-2: #0099bb;
  --x-glow:     rgba(0, 200, 224, .16);
  --x-on-accent:#04121c;
  /* renkli zemin (gradient buton, avatar, rozet) üzerindeki metin */
  --x-on-color: #ffffff;

  --x-success: #00d68f;
  --x-info:    #5b8dee;
  --x-warning: #ffb300;
  --x-danger:  #ff4d6a;

  /* yumuşak zeminler (ikon kutuları, rozetler) */
  --x-accent-soft:  rgba(0, 200, 224, .12);
  --x-success-soft: rgba(0, 214, 143, .12);
  --x-info-soft:    rgba(91, 141, 238, .12);
  --x-warning-soft: rgba(255, 179, 0, .12);
  --x-danger-soft:  rgba(255, 77, 106, .12);

  --x-shadow:    0 8px 32px rgba(0, 0, 0, .50);
  --x-shadow-sm: 0 2px 10px rgba(0, 0, 0, .28);

  /* login sahnesi */
  --x-scene-bg:     #020b16;
  --x-scene-glass:  rgba(2, 11, 24, .68);
  --x-scene-glass-2:rgba(3, 13, 28, .86);
  --x-scene-field:  rgba(3, 11, 26, .65);
  --x-scene-muted:  #426880;
  --x-scene-ocean:  #040e1e;
  --x-scene-land:   #082038;
  --x-scene-land-2: #091e33;
  --x-scene-placeholder: #163248;
  --x-hero-mid:     #5ee8ff;
  --x-hero-end:     #a8f0ff;
  --x-ok-grad-1:    #00c97a;
  --x-ok-grad-2:    #009955;
}

/* ==============================  LIGHT  ================================= */
[data-theme="light"] {
  --x-bg:         #f0f4f8;
  --x-bg-2:       #e8edf3;
  --x-surface:    #ffffff;
  --x-surface-2:  #f7f9fc;
  --x-sidebar-bg: #ffffff;
  --x-topbar-bg:  rgba(255, 255, 255, .92);
  --x-overlay:    rgba(0, 0, 0, .42);

  --x-border:   rgba(0, 0, 0, .07);
  --x-border-2: rgba(0, 0, 0, .14);

  --x-text:    #1a2c3d;
  --x-text-2:  #5a7184;
  --x-text-3:  #9db2c4;

  --x-accent:   #0099bb;
  --x-accent-2: #007a99;
  --x-glow:     rgba(0, 153, 187, .11);
  --x-on-accent:#ffffff;
  --x-on-color: #ffffff;

  --x-success: #00a67e;
  --x-info:    #3d6ee8;
  --x-warning: #e5a000;
  --x-danger:  #e63757;

  --x-accent-soft:  rgba(0, 153, 187, .10);
  --x-success-soft: rgba(0, 166, 126, .10);
  --x-info-soft:    rgba(61, 110, 232, .10);
  --x-warning-soft: rgba(229, 160, 0, .12);
  --x-danger-soft:  rgba(230, 55, 87, .10);

  --x-shadow:    0 8px 32px rgba(0, 0, 0, .10);
  --x-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);

  /* login sahnesi light temada da koyu kalır (uzay/dünya sahnesi) */
  --x-scene-bg:     #020b16;
  --x-scene-glass:  rgba(2, 11, 24, .68);
  --x-scene-glass-2:rgba(3, 13, 28, .86);
  --x-scene-field:  rgba(3, 11, 26, .65);
  --x-scene-muted:  #426880;
  --x-scene-ocean:  #040e1e;
  --x-scene-land:   #082038;
  --x-scene-land-2: #091e33;
  --x-scene-placeholder: #163248;
  --x-hero-mid:     #5ee8ff;
  --x-hero-end:     #a8f0ff;
  --x-ok-grad-1:    #00c97a;
  --x-ok-grad-2:    #009955;
}