/* ============================================================================
 * DosyaLab — tasarım tokenları
 *
 * BU DOSYA ELLE DÜZENLENMEZ.
 * Kaynak: app/config/design.php
 * Üretim: php bin/build-tokens.php
 * ==========================================================================*/

:root {
  /* --- Renkler --------------------------------------------------- */
  --dl-bg: #F1F2F4;
  --dl-surface: #FFFFFF;
  --dl-surface-sunk: #E7E9ED;
  --dl-surface-raised: #FBFBFC;
  --dl-ink: #1B1F24;
  --dl-ink-muted: #5A626D;
  --dl-ink-faint: #858D99;
  --dl-ink-inverse: #F7F8FA;
  --dl-line: #D5D9E0;
  --dl-line-strong: #B9BFC9;
  --dl-primary: #5B4FE9;
  --dl-primary-hover: #4A3ED4;
  --dl-primary-press: #3E33B8;
  --dl-primary-soft: #EDEBFD;
  --dl-primary-ring: rgba(91, 79, 233, .38);
  --dl-success: #3FB88C;
  --dl-success-ink: #127351;
  --dl-success-soft: #E4F5EE;
  --dl-danger: #E5484D;
  --dl-danger-ink: #B4262B;
  --dl-danger-soft: #FDECEC;
  --dl-warn: #D98A0B;
  --dl-warn-ink: #8A5600;
  --dl-warn-soft: #FCF2E0;

  /* --- Yazı tipleri ---------------------------------------------- */
  --dl-font-display: 'Space Grotesk', 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --dl-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --dl-font-mono: 'JetBrains Mono', 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;

  /* --- Metin ölçeği (akıcı) -------------------------------------- */
  --dl-text-xs: clamp(.72rem, .70rem + .10vw, .78rem);
  --dl-text-sm: clamp(.83rem, .80rem + .14vw, .90rem);
  --dl-text-base: clamp(.95rem, .92rem + .18vw, 1.02rem);
  --dl-text-lg: clamp(1.08rem, 1.02rem + .30vw, 1.22rem);
  --dl-text-xl: clamp(1.28rem, 1.15rem + .60vw, 1.55rem);
  --dl-text-2xl: clamp(1.55rem, 1.32rem + 1.05vw, 2.10rem);
  --dl-text-3xl: clamp(1.95rem, 1.55rem + 1.85vw, 3.05rem);

  /* --- Satır yüksekliği ------------------------------------------ */
  --dl-leading-tight: 1.12;
  --dl-leading-snug: 1.28;
  --dl-leading-normal: 1.6;
  --dl-leading-loose: 1.75;

  /* --- Harf aralığı ---------------------------------------------- */
  --dl-tracking-tight: -0.02em;
  --dl-tracking-normal: 0;
  --dl-tracking-wide: 0.04em;
  --dl-tracking-label: 0.09em;

  /* --- Boşluk ölçeği (4px tabanlı) ------------------------------- */
  --dl-space-1: 4px;
  --dl-space-2: 8px;
  --dl-space-3: 12px;
  --dl-space-4: 16px;
  --dl-space-5: 24px;
  --dl-space-6: 32px;
  --dl-space-7: 48px;
  --dl-space-8: 64px;
  --dl-space-9: 96px;
  --dl-space-10: 128px;

  /* --- Köşe yarıçapı --------------------------------------------- */
  --dl-radius-xs: 4px;
  --dl-radius-sm: 6px;
  --dl-radius-md: 10px;
  --dl-radius-lg: 16px;
  --dl-radius-xl: 22px;
  --dl-radius-pill: 999px;

  /* --- Gölgeler --------------------------------------------------- */
  --dl-shadow-xs: 0 1px 2px rgba(27,31,36,.06);
  --dl-shadow-sm: 0 1px 3px rgba(27,31,36,.08), 0 1px 2px rgba(27,31,36,.04);
  --dl-shadow-md: 0 4px 14px rgba(27,31,36,.09), 0 1px 3px rgba(27,31,36,.05);
  --dl-shadow-lg: 0 14px 40px rgba(27,31,36,.13), 0 3px 10px rgba(27,31,36,.06);
  --dl-shadow-focus: 0 0 0 3px var(--dl-primary-ring);

  /* --- Yerleşim --------------------------------------------------- */
  --dl-container: 1160px;
  --dl-container-text: 720px;
  --dl-gutter: clamp(16px, 4vw, 32px);
  --dl-header-height: 64px;

  /* --- Hareket ----------------------------------------------------- */
  --dl-motion-fast: 120ms;
  --dl-motion-base: 220ms;
  --dl-motion-slow: 420ms;
  --dl-motion-ease: cubic-bezier(.2, .7, .3, 1);
  --dl-motion-ease-in-out: cubic-bezier(.65, .05, .36, 1);

  /* --- Katman sırası ------------------------------------------------ */
  --dl-z-base: 0;
  --dl-z-sticky: 50;
  --dl-z-header: 100;
  --dl-z-overlay: 500;
  --dl-z-toast: 800;
  --dl-z-banner: 900;
}

/* ---------------------------------------------------------------------------
 * KOYU TEMA
 *
 * Roller aynı kalır, yalnızca değerler değişir; bileşen CSS'i tek sürümdür.
 * Kontrast notları için app/config/design.php > color_dark başlığına bakın.
 * ------------------------------------------------------------------------ */

/* Sistem koyu diyor ve kullanıcı açıkça "açık" dememiş */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    --dl-bg: #14171B;
    --dl-surface: #1C2026;
    --dl-surface-sunk: #101317;
    --dl-surface-raised: #232830;
    --dl-ink: #E8EAEE;
    --dl-ink-muted: #A2AAB6;
    --dl-ink-faint: #79828F;
    --dl-ink-inverse: #14171B;
    --dl-line: #2E343D;
    --dl-line-strong: #3F4650;
    --dl-primary: #9A90FF;
    --dl-primary-hover: #ADA4FF;
    --dl-primary-press: #8B80F7;
    --dl-primary-soft: #232138;
    --dl-primary-ring: rgba(154, 144, 255, .42);
    --dl-success: #3FB88C;
    --dl-success-ink: #62D3A8;
    --dl-success-soft: #16281F;
    --dl-danger: #E5484D;
    --dl-danger-ink: #FF8085;
    --dl-danger-soft: #2C1618;
    --dl-warn: #D98A0B;
    --dl-warn-ink: #E9AC4B;
    --dl-warn-soft: #2A2011;

    --dl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
    --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --dl-shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
    --dl-shadow-lg: 0 14px 40px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .4);
    --dl-shadow-focus: 0 0 0 3px var(--dl-primary-ring);
  }
}

/* Kullanıcı açıkça koyu tema seçmiş — sistem ne derse desin */
:root[data-tema="koyu"] {
  --dl-bg: #14171B;
  --dl-surface: #1C2026;
  --dl-surface-sunk: #101317;
  --dl-surface-raised: #232830;
  --dl-ink: #E8EAEE;
  --dl-ink-muted: #A2AAB6;
  --dl-ink-faint: #79828F;
  --dl-ink-inverse: #14171B;
  --dl-line: #2E343D;
  --dl-line-strong: #3F4650;
  --dl-primary: #9A90FF;
  --dl-primary-hover: #ADA4FF;
  --dl-primary-press: #8B80F7;
  --dl-primary-soft: #232138;
  --dl-primary-ring: rgba(154, 144, 255, .42);
  --dl-success: #3FB88C;
  --dl-success-ink: #62D3A8;
  --dl-success-soft: #16281F;
  --dl-danger: #E5484D;
  --dl-danger-ink: #FF8085;
  --dl-danger-soft: #2C1618;
  --dl-warn: #D98A0B;
  --dl-warn-ink: #E9AC4B;
  --dl-warn-soft: #2A2011;

  --dl-shadow-xs: 0 1px 2px rgba(0, 0, 0, .35);
  --dl-shadow-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --dl-shadow-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --dl-shadow-lg: 0 14px 40px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .4);
  --dl-shadow-focus: 0 0 0 3px var(--dl-primary-ring);
}

/* Tema değişiminde renk geçişi yumuşasın; ama sayfa ilk açılırken
   geçiş olmasın (JS, geçişi yalnızca kullanıcı düğmeye basınca açar). */
:root.tema-gecisi,
:root.tema-gecisi *,
:root.tema-gecisi *::before,
:root.tema-gecisi *::after {
  transition: background-color 220ms ease, border-color 220ms ease,
              color 220ms ease, fill 220ms ease, box-shadow 220ms ease !important;
}

@media (prefers-reduced-motion: reduce) {
  :root.tema-gecisi,
  :root.tema-gecisi * { transition: none !important; }
}