/* DropNio tasarım belirteçleri (SPEC bölüm 3).
   Her sayfa bu dosyayı ilk stil dosyası olarak yükler: /assets/tokens.css
   (panel kendi klasöründen, hub ise panel varlıklarına düşerek sunar).
   Burada yalnız değişkenler, temaya göre color-scheme ve hareket azaltma
   kuralı vardır; hiçbir öğe biçimlendirilmez. Açık tema varsayılandır, koyu
   tema html[data-theme="dark"] ile gelir (theme.js / panel-theme.js). */

:root {
  color-scheme: light;

  /* Yazı tipi */
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Yazı boyutu ölçeği */
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 30px;
  --fs-5xl: 36px;
  --fs-6xl: 48px;
  --fs-7xl: 56px;

  /* Satır yüksekliği */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;

  /* Yazı kalınlığı */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Boşluk ölçeği (4 px tabanlı) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

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

  /* Katman sırası: bildirim (toast) pencerelerin de üstünde */
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-toast: 1400;

  /* Renkler: açık tema */
  --c-canvas: #F5F6F8;
  --c-surface: #FFFFFF;
  --c-surface-2: #F9FAFB;
  --c-surface-3: #F1F3F6;
  --c-border: #E4E7EC;
  --c-border-strong: #D0D5DD;
  --c-text: #0E2036;
  --c-text-2: #475467;
  --c-text-3: #667085;
  --c-text-inverse: #FFFFFF;
  --c-brand: #006BFF;
  --c-brand-hover: #005ADD;
  --c-brand-press: #004BB7;
  --c-brand-soft: #EAF2FF;
  --c-brand-text: #0056CC;
  --c-on-brand: #FFFFFF;
  --c-ink: #0E1726;
  --c-ink-2: #1A2436;
  --c-success: #067647;
  --c-success-soft: #ECFDF3;
  --c-warning: #B54708;
  --c-warning-soft: #FFFAEB;
  --c-danger: #B42318;
  --c-danger-soft: #FEF3F2;
  --c-info: #175CD3;
  --c-info-soft: #EFF8FF;
  /* Odak halkası: doğrudan box-shadow değeri olarak kullanılır */
  --c-focus: 0 0 0 3px rgba(0,107,255, .28);

  /* Gölgeler: açık tema */
  --sh-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04);
  --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
  --sh-xl: 0 20px 24px -4px rgba(16, 24, 40, .08), 0 8px 8px -4px rgba(16, 24, 40, .03);
}

/* Koyu tema: yalnız renkler ve gölgeler değişir; ölçekler :root'tan gelir. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --c-canvas: #070D1B;
  --c-surface: #0E1A2E;
  --c-surface-2: #12203A;
  --c-surface-3: #17253F;
  --c-border: #1E2F4D;
  --c-border-strong: #294267;
  --c-text: #E9EFF8;
  --c-text-2: #AAB4C3;
  --c-text-3: #8794A7;
  --c-text-inverse: #0B0F17;
  --c-brand: #4198FF;
  --c-brand-hover: #79B9FF;
  --c-brand-press: #247FEC;
  --c-brand-soft: rgba(65,152,255, .12);
  --c-brand-text: #79B9FF;
  --c-on-brand: #071B35;
  --c-ink: #0E1726;
  --c-ink-2: #151F31;
  --c-success: #47CD89;
  --c-success-soft: rgba(71, 205, 137, .12);
  --c-warning: #FDB022;
  --c-warning-soft: rgba(253, 176, 34, .12);
  --c-danger: #F97066;
  --c-danger-soft: rgba(249, 112, 102, .12);
  --c-info: #53B1FD;
  --c-info-soft: rgba(83, 177, 253, .12);
  --c-focus: 0 0 0 3px rgba(65,152,255, .35);

  /* Gölgeler: koyu zeminde görünsün diye aynı geometri, her katman rgba(0,0,0,.4) */
  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .4);
  --sh-md: 0 4px 8px -2px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .4);
  --sh-lg: 0 12px 16px -4px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .4);
  --sh-xl: 0 20px 24px -4px rgba(0, 0, 0, .4), 0 8px 8px -4px rgba(0, 0, 0, .4);
}

/* Hareket azaltma: sistem ayarı açıksa geçiş ve animasyonlar anında biter.
   Süre sıfır değil .01ms: transitionend/animationend olayları yine tetiklenir. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}