/*
 * Probot Studio - paylaşılan tasarım token'ları (Probot kimliği, KİLİTLİ v2).
 * Kimlik: marka turuncusu + krem - "playful bento" (bkz. notes/DESIGN.md + notes/DESIGN-SPEC.md).
 * Kazanan hero: ui/hero/variant-9-playful-bento.html (probot-business ortak kararı, 2026-07-02).
 *
 * Kullanım:  @import '../../ui/tokens.css';  (veya kopyala)
 */
:root {
  /* Marka - turuncu skala */
  --probot-orange-700: #D63600; /* koyu / buton ofset gölgesi */
  --probot-orange-600: #FF4500; /* BİRİNCİL marka rengi */
  --probot-orange-500: #FF8A00; /* gradyan ortağı */
  --probot-amber:      #FFB020; /* vurgu altçizgi / ikincil */

  /* Nötrler / yüzeyler (krem aile - saf beyaz zemin YOK) */
  --surface:        #ffffff;   /* kart yüzeyi */
  --surface-muted:  #FFF7F0;   /* sayfa zemini (krem) */
  --surface-soft:   #FFF1EA;   /* ikon kutusu / yumuşak dolgu */
  --line:           #f1e7df;   /* kenarlık */
  --scrollbar:      #d9b89e;

  /* Metin */
  --text-ink:       #241a12;   /* başlık/gövde (kakao) */
  --text-muted:     #6f6258;
  --text-on-orange: #ffffff;

  /* Anlamsal kısayollar */
  --color-bg:       var(--surface-muted);
  --color-surface:  var(--surface);
  --color-primary:  var(--text-ink);
  --color-accent:   var(--probot-orange-600);
  --color-accent-deep: var(--probot-orange-700);
  --color-text:     var(--text-ink);
  --color-border:   var(--line);

  /* Tipografi - tombul rounded sans; keskin grotesk kullanma */
  --font-sans: 'Baloo 2', 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ölçek - radius bandı 14–26 (spec v1.1: 16 altı buton yok, clay 28+ yok) */
  --radius-sm: 10px;  /* chip içi küçük parçalar */
  --radius:    16px;  /* buton */
  --radius-lg: 26px;  /* kart / bento karo */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Gölge - gri değil, marka turuncusunun koyusu */
  --shadow-1: 0 8px 24px rgba(214, 54, 0, 0.08);
  --shadow-2: 0 18px 36px rgba(214, 54, 0, 0.16);
  --shadow-btn: 0 7px 0 var(--probot-orange-700);        /* birincil buton ofseti */
  --shadow-btn-soft: 0 7px 0 #f0d9c8;                    /* ikincil buton ofseti */

  /* Gradyan - sadece vurgu yüzeylerinde (blob, video kartı); zemine yayma */
  --grad-brand: linear-gradient(150deg, var(--probot-orange-500), var(--probot-orange-600));
  --grad-blob:  linear-gradient(150deg, var(--probot-amber), var(--probot-orange-600));

  /* SAYFA STANDARDI (docs/TASARIM-STANDARDI.md, 2026-10-01): header'dan ulasilan
     sayfalarin ortak olculeri. Magaza/hesap, egitim hub'i ve ders sayfalari bunlari okur;
     header.js shadow DOM'da ayni sayilari kendi yazar (64px bar, 38px logo isareti). */
  --ps-header-h:   64px;      /* header cubugu (magaza masaustunde +44px kategori seridi) */
  --ps-yan-w:      264px;     /* sol panel genisligi */
  --ps-yan-bg:     #ffffff;   /* sol panel zemini, opak */
  --ps-yan-cizgi:  #eadfd6;   /* sol panelin sag cizgisi + mobil seridin alt cizgisi */
  --ps-yan-bas:    #9c8d80;   /* grup basligi: 12px 800 buyuk harf .07em */
  --ps-yan-oge:    #6f6258;   /* panel ogesi (duz metin, 15px 600) */
  --ps-yan-secili: #241a12;   /* secili oge: koyu + kalin + 2px turuncu sol cizgi */
  --ps-vurgu:      #FF4500;   /* secili cizgisi, odak */
  --ps-icerik-sol: 44px;      /* panel ile icerik arasi */
  --ps-icerik-ust: 32px;      /* header altindan h1'e */
  --ps-h1:         30px;      /* icerik sayfasi h1 (mobil 26px), 800, -.02em, 1.2 */
  --ps-h1-mobil:   26px;
  --ps-r-kart:     12px;      /* kart koseleri */
  --ps-r-kontrol:  8px;       /* buton, girdi */
}