/* ── Design Tokens ───────────────────────────────────────────────────────────
   Tek otorite: tüm renk, radius, shadow değerleri buradan gelir.
   assets/css/*.css ve PHP inline style'ları bu değişkenleri kullanmalı.
   Tailwind teması ile senkronize tutulur.                                    */

:root {

  /* ── Renkler: Primary ─────────────────────────────────────── */
  --c-primary:      #2563eb;   /* blue-600  */
  --c-primary-dk:   #1d4ed8;   /* blue-700  */
  --c-primary-lt:   #eff6ff;   /* blue-50   */
  --c-primary-ring: rgba(37,99,235,.08);

  /* ── Renkler: Nötr (Slate palette) ───────────────────────── */
  --c-dark:         #0f172a;   /* slate-900 */
  --c-dark-2:       #1e293b;   /* slate-800 */
  --c-muted-1:      #475569;   /* slate-600 */
  --c-muted-2:      #64748b;   /* slate-500 */
  --c-muted-3:      #94a3b8;   /* slate-400 */
  --c-muted-4:      #cbd5e1;   /* slate-300 */

  /* ── Renkler: Arka planlar / Kenarlıklar ──────────────────── */
  --c-border:       #e2e8f0;   /* slate-200 */
  --c-border-lt:    #f1f5f9;   /* slate-100 */
  --c-bg-soft:      #f8fafc;   /* slate-50  */
  --c-bg-white:     #ffffff;

  /* ── Renkler: Semantik ────────────────────────────────────── */
  --c-success:      #16a34a;   /* green-600  */
  --c-success-lt:   #f0fdf4;   /* green-50   */
  --c-success-ring: #bbf7d0;   /* green-200  */

  --c-error:        #dc2626;   /* red-600    */
  --c-error-lt:     #fef2f2;   /* red-50     */
  --c-error-ring:   #fecaca;   /* red-200    */

  --c-warn:         #d97706;   /* amber-600  */
  --c-warn-lt:      #fffbeb;   /* amber-50   */
  --c-warn-ring:    #fde68a;   /* amber-200  */

  --c-info:         #1d4ed8;   /* blue-700   */
  --c-info-lt:      #eff6ff;   /* blue-50    */
  --c-info-ring:    #bfdbfe;   /* blue-200   */

  /* ── Border Radius ────────────────────────────────────────── */
  --r-xs:   .375rem;   /* 6px  — küçük badge, mini buton */
  --r-sm:   .5rem;     /* 8px  — küçük kart */
  --r-md:   .625rem;   /* 10px — input, buton */
  --r-lg:   .75rem;    /* 12px — notice, form */
  --r-xl:   .875rem;   /* 14px — kart */
  --r-2xl:  1rem;      /* 16px — büyük kart */
  --r-3xl:  1.25rem;   /* 20px — modal */
  --r-full: 9999px;    /* pill */

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 4px 12px rgba(15,23,42,.08);
  --shadow-lg:  0 10px 30px rgba(15,23,42,.10);
  --shadow-xl:  0 24px 48px rgba(0,0,0,.14);

  /* ── Spacing (layout) ─────────────────────────────────────── */
  --container-max: 80rem;   /* max-w-7xl — header ile eşleşir */
  --header-h:      70px;

  /* ── Geçişler ─────────────────────────────────────────────── */
  --t-fast:   .12s ease;
  --t-base:   .15s ease;
  --t-slow:   .25s ease;

  /* ── Font ─────────────────────────────────────────────────── */
  --font-size-xs:   .75rem;
  --font-size-sm:   .8125rem;
  --font-size-base: .875rem;
  --font-size-md:   .9375rem;
  --font-size-lg:   1rem;
  --font-size-xl:   1.125rem;
}