/* ==========================================================================
   AKBEL — Tasarım token'ları (tek kaynak)
   Marka rengi logodan alınmıştır: #650084 (brand-700)
   Ön yüz ve panel aynı token'ları kullanır.
   ========================================================================== */

:root {
  /* Marka moru — 11 ton */
  --brand-50:  #faf5fc;
  --brand-100: #f3e6f8;
  --brand-200: #e6ccf1;
  --brand-300: #d1a3e4;
  --brand-400: #b46fd1;
  --brand-500: #9640ba;
  --brand-600: #7d1fa1;
  --brand-700: #650084;
  --brand-800: #52006b;
  --brand-900: #3d0050;
  --brand-950: #260033;

  /* Mor tonlu nötr gri skala */
  --gray-0:   #ffffff;
  --gray-25:  #fcfbfd;
  --gray-50:  #f7f6f9;
  --gray-100: #efedf2;
  --gray-200: #e3e0e8;
  --gray-300: #cdc8d4;
  --gray-400: #a39cac;
  --gray-500: #776f82;
  --gray-600: #5a5465;
  --gray-700: #423d4b;
  --gray-800: #2a2630;
  --gray-900: #1a171f;
  --gray-950: #100e14;

  /* Durum renkleri */
  --success: #0f7a55;  --success-soft: #e7f6ef;  --success-line: #b5e3cf;
  --warning: #a8590a;  --warning-soft: #fdf3e3;  --warning-line: #f3d3a3;
  --danger:  #c0281c;  --danger-soft:  #fdeceb;  --danger-line:  #f5c0bb;
  --info:    #1c5fc4;  --info-soft:    #eaf1fd;  --info-line:    #bcd3f6;

  /* Anlamsal yüzeyler — açık tema */
  --bg: var(--gray-50);
  --surface: var(--gray-0);
  --surface-2: var(--gray-25);
  --surface-3: var(--gray-100);
  --border: var(--gray-200);
  --border-strong: var(--gray-300);
  --text: var(--gray-900);
  --text-2: var(--gray-600);
  --text-3: var(--gray-500);
  --text-inverse: #ffffff;

  --primary: var(--brand-700);
  --primary-hover: var(--brand-800);
  --primary-active: var(--brand-900);
  --primary-soft: var(--brand-50);
  --primary-soft-2: var(--brand-100);
  --primary-text: var(--brand-700);
  --accent: #c026d3;

  --focus-ring: 0 0 0 3px rgba(125, 31, 161, .28);
  --overlay: rgba(16, 14, 20, .52);

  /* Kenar sol menü (her iki temada da koyu) */
  --sb-bg: #1b0f22;
  --sb-bg-2: #24152d;
  --sb-text: #cfc3d8;
  --sb-muted: #8f7f9b;
  --sb-hover: rgba(255, 255, 255, .06);
  --sb-active: rgba(180, 111, 209, .18);
  --sb-active-text: #ffffff;
  --sb-line: rgba(255, 255, 255, .07);

  /* Tipografi */
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --lh-tight: 1.2;
  --lh: 1.55;

  /* 4px tabanlı boşluk */
  --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;

  /* Yuvarlatma */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Gölgeler */
  --shadow-xs: 0 1px 2px rgba(26, 12, 34, .06);
  --shadow-sm: 0 1px 3px rgba(26, 12, 34, .08), 0 1px 2px rgba(26, 12, 34, .04);
  --shadow-md: 0 6px 16px -4px rgba(26, 12, 34, .12), 0 2px 6px -2px rgba(26, 12, 34, .06);
  --shadow-lg: 0 24px 48px -12px rgba(26, 12, 34, .22), 0 8px 16px -8px rgba(26, 12, 34, .1);
  --shadow-brand: 0 10px 30px -10px rgba(101, 0, 132, .55);

  /* Hareket */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 260ms;

  /* Ölçüler */
  --sb-w: 264px;
  --sb-w-collapsed: 76px;
  --topbar-h: 64px;
  --container: 1240px;

  color-scheme: light;
}

/* ── Koyu tema ─────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  --bg: #0e0a12;
  --surface: #17121c;
  --surface-2: #1c1622;
  --surface-3: #241d2b;
  --border: #2c2434;
  --border-strong: #3d3447;
  --text: #f2eef5;
  --text-2: #b8afc2;
  --text-3: #8b8196;

  --primary: #8c35b2;
  --primary-hover: #9d47c3;
  --primary-active: #7a24a0;
  --primary-soft: rgba(150, 64, 186, .16);
  --primary-soft-2: rgba(150, 64, 186, .26);
  --primary-text: #d6a9ea;
  --accent: #e879f9;

  --success: #4cc79a;  --success-soft: rgba(76, 199, 154, .12);  --success-line: rgba(76, 199, 154, .3);
  --warning: #f0b25a;  --warning-soft: rgba(240, 178, 90, .12);  --warning-line: rgba(240, 178, 90, .3);
  --danger:  #f47a6f;  --danger-soft:  rgba(244, 122, 111, .12); --danger-line:  rgba(244, 122, 111, .3);
  --info:    #74a8f2;  --info-soft:    rgba(116, 168, 242, .12); --info-line:    rgba(116, 168, 242, .3);

  --focus-ring: 0 0 0 3px rgba(200, 140, 230, .35);
  --overlay: rgba(0, 0, 0, .62);

  --sb-bg: #110b15;
  --sb-bg-2: #1a1220;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .45);
  --shadow-md: 0 8px 20px -6px rgba(0, 0, 0, .55);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

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