/* ============================================================
   OTOPILOT · tokens.css
   Tasarım jetonları: renk, tipografi, boşluk, hareket.
   Koyu "gece kokpiti" varsayılan + açık tema.
   ============================================================ */

:root {
  /* ---- zemin katmanları ---- */
  --bg: #0b0b10;
  --bg-2: #0e0e15;
  --surface: #12121a;
  --surface-2: #171722;
  --surface-3: #1d1d2b;
  --line: #242433;
  --line-2: #30304a;

  /* ---- metin ---- */
  --ink: #f2f2f7;
  --ink-2: #b6b6c8;
  --ink-3: #7c7c93;
  --ink-4: #52526a;

  /* ---- vurgu: elektrik menekşe ---- */
  --brand: #7c5cff;
  --brand-2: #9f7cff;
  --brand-soft: rgba(124, 92, 255, .12);
  --brand-line: rgba(124, 92, 255, .3);

  /* ---- semantik ---- */
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, .12);
  --warn: #fbbf24;
  --warn-soft: rgba(251, 191, 36, .12);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, .12);
  --info: #60a5fa;
  --info-soft: rgba(96, 165, 250, .12);

  /* ---- platform renkleri ---- */
  --ig: #e1306c;
  --li: #0a66c2;
  --pin: #e60023;
  --x: #ffffff;

  /* ---- şekil ---- */
  --r-xs: 7px;
  --r-sm: 10px;
  --r: 13px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 10px 34px rgba(0, 0, 0, .45);
  --shadow-3: 0 26px 80px rgba(0, 0, 0, .6);
  --glow: 0 0 0 1px var(--brand-line), 0 8px 30px rgba(124, 92, 255, .22);

  /* ---- tipografi ---- */
  --font: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- ölçek ---- */
  --rail-w: 236px;
  --topbar-h: 60px;
  --gap: 16px;

  /* ---- hareket ---- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --fast: .14s;
  --mid: .24s;
  --slow: .4s;
}

[data-theme="light"] {
  --bg: #f7f7fa;
  --bg-2: #f1f1f6;
  --surface: #ffffff;
  --surface-2: #f6f6fa;
  --surface-3: #ededf4;
  --line: #e6e6ee;
  --line-2: #d5d5e2;
  --ink: #111118;
  --ink-2: #4a4a58;
  --ink-3: #7e7e8f;
  --ink-4: #adadbc;

  --brand: #6d4ce8;
  --brand-2: #7c5cff;
  --brand-soft: rgba(109, 76, 232, .09);
  --brand-line: rgba(109, 76, 232, .24);

  --x: #111118;
  --shadow-1: 0 1px 2px rgba(20, 20, 40, .07);
  --shadow-2: 0 10px 34px rgba(20, 20, 40, .1);
  --shadow-3: 0 26px 80px rgba(20, 20, 40, .16);
  --glow: 0 0 0 1px var(--brand-line), 0 8px 30px rgba(109, 76, 232, .16);
}

/* ---- azaltılmış hareket ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}