/**
 * Tasarım tokenları — breakpoint, boşluk, tipografi ölçeği.
 * Tüm sayfalarda önce bu dosya yüklenir.
 */
:root {
    /* Ekran eşikleri (JS ve dokümantasyon için; media query’de px kullanımı yaygın) */
    --gf-bp-sm: 480px;
    --gf-bp-md: 768px;
    --gf-bp-lg: 1024px;
    --gf-bp-xl: 1280px;

    /* İçerik genişliği */
    --gf-container-max: 75rem;

    /* Yatay boşluk: dar ekranda dar, genişte sınırlı artış */
    --gf-gutter: clamp(0.75rem, 2.5vw, 1.5rem);
    --gf-gutter-tight: clamp(0.5rem, 2vw, 1rem);

    /* Dikey ritim */
    --gf-stack-xs: 0.35rem;
    --gf-stack-sm: 0.5rem;
    --gf-stack-md: 1rem;
    --gf-stack-lg: 1.5rem;
    --gf-stack-xl: 2rem;

    /* Gövde metni: küçük ekranda okunaklı minimum, büyükte patlamaz */
    --gf-text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --gf-text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
    --gf-text-lg: clamp(1.0625rem, 0.95rem + 0.45vw, 1.125rem);
    --gf-text-xl: clamp(1.2rem, 1.05rem + 0.65vw, 1.35rem);
    --gf-text-2xl: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);

    --gf-leading-tight: 1.25;
    --gf-leading-normal: 1.55;
    --gf-leading-relaxed: 1.65;

    --gf-color-text: #111827;
    --gf-color-text-muted: #4b5563;
    --gf-color-bg: #f5f5f5;
    --gf-color-surface: #ffffff;
}