/* ==========================================================================
   FormFlow — Tasarım token'ları (Bölüm 3.2 / 3.3)
   Bu dosya tek doğruluk kaynağıdır; hiçbir bileşen ham renk değeri yazmaz.
   ========================================================================== */

:root {
  /* Zemin katmanları — soğuk beyaz, asla saf gri değil */
  --bg-canvas:      #F6F7FB;
  --bg-surface:     #FFFFFF;
  --bg-sunken:      #EEF0F8;
  --bg-overlay:     rgba(16, 20, 40, 0.48);

  /* Mürekkep */
  --ink-900:        #0D1026;
  --ink-700:        #2C3157;
  --ink-500:        #6B7192;
  --ink-300:        #A6ABC6;

  /* Çizgiler */
  --line-soft:      #E7E9F4;
  --line-strong:    #D2D6E8;

  /* Ana aks — Ultraviyole */
  --brand-600:      #4B34E8;
  --brand-500:      #5B4BFF;
  --brand-400:      #7C6FFF;
  --brand-100:      #E9E6FF;
  --brand-050:      #F4F2FF;

  /* Durum renkleri */
  --ok-500:         #0FA968;   --ok-100:   #DDF6EA;
  --warn-500:       #E0930A;   --warn-100: #FDF1DA;
  --err-500:        #E23D53;   --err-100:  #FDE7EA;
  --info-500:       #1E8FD5;   --info-100: #DDF0FB;

  /* Grafik paleti — sırayla kullanılır, 8 seri sonrası döngüye girer */
  --chart-1: #5B4BFF;  --chart-2: #1EC8B0;  --chart-3: #FF8A4C;
  --chart-4: #E23D53;  --chart-5: #35A7FF;  --chart-6: #A855F7;
  --chart-7: #E0930A;  --chart-8: #0FA968;

  /* Yükseklik — mor tabanlı gölge, asla siyah gölge */
  --shadow-xs:  0 1px 2px rgba(24, 26, 64, 0.05);
  --shadow-sm:  0 2px 8px rgba(24, 26, 64, 0.06);
  --shadow-md:  0 8px 24px rgba(24, 26, 64, 0.08);
  --shadow-lg:  0 20px 48px rgba(24, 26, 64, 0.12);
  --shadow-focus: 0 0 0 4px rgba(91, 75, 255, 0.16);

  /* Köşe yarıçapı */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 18px;  --r-xl: 26px;  --r-full: 999px;

  /* Aralık — 4pt ızgara */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* Hareket */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;  --dur-base: 220ms;  --dur-slow: 420ms;

  /* Tipografi */
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Tip ölçeği — 1.25 oranı, mobilde clamp ile küçülür */
  --t-display-size: clamp(28px, 4vw, 40px);
  --t-h1-size:      clamp(24px, 3vw, 30px);
  --t-h2-size:      20px;
  --t-h3-size:      17px;
  --t-body-size:    15px;
  --t-small-size:   13px;
  --t-label-size:   13px;
  --t-caption-size: 11.5px;

  /* Public form genişliği (tema tarafından geçersiz kılınabilir) */
  --form-width: 720px;

  /* Panel ölçüleri */
  --sidebar-width: 244px;
  --topbar-height: 64px;
}

/* --------------------------------------------------------------------------
   Yerel yazı tipleri.
   Font dosyaları assets/fonts/ klasörüne bırakılır; CDN bağımlılığı yoktur.
   Dosya yoksa system-ui yedeği devreye girer ve düzen bozulmaz.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  src: local('Inter'), url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2000-206F, U+20A0-20BF;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter Medium'), url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: local('Inter SemiBold'), url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans Bold'), url('../fonts/jakarta-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: local('Plus Jakarta Sans ExtraBold'), url('../fonts/jakarta-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: local('JetBrains Mono'), url('../fonts/jetbrains-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}