/* ==========================================================================
   SanalAjans — Tasarım Jetonları (Design Tokens)
   Sürüm 1.0 · Bu dosya markanın tek doğruluk kaynağıdır.
   Değerleri buradan değiştirin; site ve tüm materyaller onu izler.
   ========================================================================== */

:root{

  /* ------------------------------------------------------------------
     1. RENK — HAM RAMPALAR
     Her rampa 50 (en açık) → 900 (en koyu) gider.
     ------------------------------------------------------------------ */

  /* Mürekkep · nötr, hafif soğuk. Metin, yüzey ve çerçevelerin tamamı. */
  --sa-ink-50:   #F7F7FA;
  --sa-ink-100:  #F0F0F4;
  --sa-ink-200:  #E0E0E8;
  --sa-ink-300:  #C0C0CE;
  --sa-ink-400:  #9494A8;
  --sa-ink-500:  #6A6A80;
  --sa-ink-600:  #45455A;
  --sa-ink-700:  #2A2A38;
  --sa-ink-800:  #1A1A24;
  --sa-ink-900:  #0F0F16;
  --sa-ink-950:  #08080C;

  /* Sinyal · birincil marka rengi. Eylem, bağlantı, vurgulu her şey. */
  --sa-signal-50:  #F4F2FF;
  --sa-signal-100: #E7E4FF;
  --sa-signal-200: #CBC6FF;
  --sa-signal-300: #A69EFF;
  --sa-signal-400: #7D71FF;
  --sa-signal-500: #5A4BFF;
  --sa-signal-600: #4535E6;   /* birincil · beyaz üzerinde 7.2:1 */
  --sa-signal-700: #3527B8;
  --sa-signal-800: #271D8A;
  --sa-signal-900: #1C1560;

  /* Akış · ikincil. Veri, hareket, canlılık. Yalnızca koyu zeminde metin olur. */
  --sa-flow-100: #D9FAF6;
  --sa-flow-200: #A9F3EA;
  --sa-flow-300: #6FE9DA;
  --sa-flow-400: #2DD9C6;
  --sa-flow-500: #00BFAE;     /* grafik aksanı · beyaz üzerinde metin İÇİN DEĞİL */
  --sa-flow-600: #009C90;
  --sa-flow-700: #007A72;

  /* Nabız · üçüncül. Dikkat, bekleyen onay, insan müdahalesi. */
  --sa-pulse-100: #FFF1D6;
  --sa-pulse-300: #FFCF7A;
  --sa-pulse-500: #FFB020;
  --sa-pulse-700: #B87400;

  /* Durum renkleri */
  --sa-ok-500:     #12A150;
  --sa-ok-700:     #0B6E37;
  --sa-warn-500:   #E8A317;
  --sa-danger-500: #E5484D;
  --sa-danger-700: #B02A2F;


  /* ------------------------------------------------------------------
     2. RENK — ANLAMSAL ROLLER
     Arayüzde ham rampa değil, bu roller kullanılır.
     ------------------------------------------------------------------ */

  --sa-bg:            #FFFFFF;
  --sa-bg-sunken:     var(--sa-ink-50);
  --sa-bg-raised:     #FFFFFF;
  --sa-bg-inverse:    var(--sa-ink-950);

  /* Metin renkleri beyaz zeminde WCAG AA (4.5:1) eşiğini geçecek biçimde seçildi.
     ink-400 metin için yeterli değil (2.97:1); yalnızca çizgi ve süs öğelerinde kullanılır. */
  --sa-text:          var(--sa-ink-800);   /* 17.3:1 */
  --sa-text-muted:    var(--sa-ink-500);   /*  5.3:1 */
  --sa-text-subtle:   #74748A;             /*  4.6:1 — en açık metin tonu */
  --sa-text-faint:    var(--sa-ink-400);   /* metin DEĞİL: ayraç, ikon, süs */
  --sa-text-inverse:  var(--sa-ink-50);
  --sa-text-on-brand: #FFFFFF;

  --sa-border:        rgba(15,15,22,.10);
  --sa-border-strong: rgba(15,15,22,.22);
  --sa-border-inverse:rgba(255,255,255,.14);

  --sa-brand:         var(--sa-signal-600);
  --sa-brand-hover:   var(--sa-signal-700);
  --sa-brand-soft:    var(--sa-signal-50);
  --sa-brand-on-dark: var(--sa-signal-300);   /* koyu zeminde bağlantı rengi */

  --sa-accent:        var(--sa-flow-500);
  --sa-accent-on-dark:var(--sa-flow-400);

  /* Marka geçişi — yalnızca büyük yüzeylerde ve başlıklarda */
  --sa-gradient: linear-gradient(104deg, var(--sa-signal-600) 0%, var(--sa-signal-400) 38%, var(--sa-flow-500) 100%);
  --sa-gradient-soft: linear-gradient(104deg, var(--sa-signal-100), var(--sa-flow-100));


  /* ------------------------------------------------------------------
     3. TİPOGRAFİ
     ------------------------------------------------------------------ */
  --sa-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "Inter", "Helvetica Neue", system-ui, sans-serif;
  --sa-font-mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", monospace;

  --sa-weight-regular: 400;
  --sa-weight-medium:  500;
  --sa-weight-semi:    600;
  --sa-weight-bold:    700;

  /* Ölçek — akışkan, en küçükten en büyüğe */
  --sa-size-micro:   12px;
  --sa-size-small:   14px;
  --sa-size-body:    17px;
  --sa-size-lead:    clamp(19px, 2.1vw, 25px);
  --sa-size-h4:      19px;
  --sa-size-h3:      clamp(23px, 2.6vw, 32px);
  --sa-size-h2:      clamp(30px, 4.4vw, 52px);
  --sa-size-h1:      clamp(38px, 6vw, 68px);
  --sa-size-display: clamp(46px, 7.6vw, 112px);

  /* Harf aralığı — punto büyüdükçe daralır */
  --sa-track-display: -.042em;
  --sa-track-h1:      -.03em;
  --sa-track-h2:      -.026em;
  --sa-track-h3:      -.02em;
  --sa-track-body:    -.01em;
  --sa-track-caps:    .06em;


  /* ------------------------------------------------------------------
     4. UZAY VE BİÇİM
     ------------------------------------------------------------------ */
  --sa-space-1: 4px;   --sa-space-2: 8px;   --sa-space-3: 12px;
  --sa-space-4: 16px;  --sa-space-5: 24px;  --sa-space-6: 32px;
  --sa-space-7: 48px;  --sa-space-8: 64px;  --sa-space-9: 96px;

  --sa-radius-sm:  10px;
  --sa-radius-md:  16px;
  --sa-radius-lg:  22px;
  --sa-radius-xl:  30px;
  --sa-radius-pill: 980px;

  --sa-shadow-sm: 0 1px 2px rgba(8,8,12,.06);
  --sa-shadow-md: 0 14px 32px -22px rgba(8,8,12,.35);
  --sa-shadow-lg: 0 30px 60px -30px rgba(8,8,12,.45);

  --sa-measure-narrow: 620px;   /* okuma genişliği */
  --sa-measure:        980px;   /* ana içerik */
  --sa-measure-wide:  1240px;   /* geniş ızgara */


  /* ------------------------------------------------------------------
     5. HAREKET
     Marka ilkesi: hareket kaydırma konumuna bağlıdır, süreye değil.
     Aşağıdaki süreler yalnızca imleç/odak gibi anlık geri bildirim içindir.
     ------------------------------------------------------------------ */
  --sa-ease:     cubic-bezier(.28,.11,.32,1);   /* marka eğrisi */
  --sa-ease-out: cubic-bezier(.16,1,.3,1);
  --sa-dur-fast: .3s;
  --sa-dur-slow: .7s;
}