/* ==========================================================================
   tokens.css — tasarım değişkenleri (TEK KAYNAK).

   ÖNEMLİ: Renk ve tipografi değerleri şimdilik NÖTR PLACEHOLDER'dır.
   Nihai marka renkleri/fontları kullanıcıdan gelecek. Geldiğinde
   YALNIZCA bu dosya değişir — başka hiçbir dosyaya sabit renk yazılmaz.
   ========================================================================== */

:root {
    /* ---------- Nötr ölçek (gri) ---------- */
    --c-neutral-0:   #ffffff;
    --c-neutral-50:  #f7f8f9;
    --c-neutral-100: #eceef1;
    --c-neutral-200: #dcdfe4;
    --c-neutral-300: #c2c7cf;
    --c-neutral-400: #98a0ab;
    --c-neutral-500: #6d7682;
    --c-neutral-600: #4e565f;
    --c-neutral-700: #383e46;
    --c-neutral-800: #23282e;
    --c-neutral-900: #14171a;

    /* ---------- Marka (PLACEHOLDER — koyu kurumsal mavi) ---------- */
    --c-brand-50:  #eef3f8;
    --c-brand-100: #d5e2ee;
    --c-brand-300: #8fb1cf;
    --c-brand-500: #2f6796;
    --c-brand-600: #265579;
    --c-brand-700: #1d4361;
    --c-brand-900: #122a3d;

    /* ---------- Vurgu (PLACEHOLDER) ---------- */
    --c-accent-500: #c2762b;
    --c-accent-600: #a4611f;

    /* ---------- Durum renkleri ---------- */
    --c-success: #2f7d47;
    --c-warning: #b5791a;
    --c-danger:  #b3372f;

    /* ---------- Anlamsal roller (kod bunları kullanır) ---------- */
    --color-bg:            var(--c-neutral-0);
    --color-bg-subtle:     var(--c-neutral-50);
    --color-surface:       var(--c-neutral-0);
    --color-surface-alt:   var(--c-neutral-100);
    --color-text:          var(--c-neutral-800);
    --color-text-strong:   var(--c-neutral-900);
    --color-text-muted:    var(--c-neutral-500);
    --color-text-invert:   var(--c-neutral-0);
    --color-border:        var(--c-neutral-200);
    --color-border-strong: var(--c-neutral-300);
    --color-primary:       var(--c-brand-500);
    --color-primary-hover: var(--c-brand-600);
    --color-primary-dark:  var(--c-brand-900);
    --color-accent:        var(--c-accent-500);
    --color-accent-hover:  var(--c-accent-600);
    --color-link:          var(--c-brand-600);
    --color-link-hover:    var(--c-brand-700);
    --color-focus:         var(--c-brand-500);

    /* ---------- Tipografi ---------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    --font-heading: var(--font-sans);
    --font-body: var(--font-sans);

    /* Boy ölçeği (1.200 — minor third) */
    --fs-xs:   0.75rem;   /* 12px */
    --fs-sm:   0.875rem;  /* 14px */
    --fs-base: 1rem;      /* 16px */
    --fs-md:   1.125rem;  /* 18px */
    --fs-lg:   1.25rem;   /* 20px */
    --fs-xl:   1.5rem;    /* 24px */
    --fs-2xl:  1.875rem;  /* 30px */
    --fs-3xl:  2.25rem;   /* 36px */
    --fs-4xl:  3rem;      /* 48px */

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    --lh-tight:  1.2;
    --lh-snug:   1.35;
    --lh-normal: 1.6;
    --lh-loose:  1.75;

    --ls-tight: -0.01em;
    --ls-wide:   0.04em;

    /* ---------- Boşluk ölçeği (4px tabanlı) ---------- */
    --space-0:  0;
    --space-1:  0.25rem;  /* 4  */
    --space-2:  0.5rem;   /* 8  */
    --space-3:  0.75rem;  /* 12 */
    --space-4:  1rem;     /* 16 */
    --space-5:  1.5rem;   /* 24 */
    --space-6:  2rem;     /* 32 */
    --space-7:  3rem;     /* 48 */
    --space-8:  4rem;     /* 64 */
    --space-9:  6rem;     /* 96 */

    /* ---------- Ölçü / yerleşim ---------- */
    --container-max: 1200px;
    --container-narrow: 760px;
    --gutter: var(--space-4);
    --measure: 68ch;              /* okunabilir satır uzunluğu */
    --section-y: var(--space-8);  /* bölüm dikey boşluğu */
    --header-height: 64px;        /* üst bandın en az yüksekliği */

    /* ---------- Kenar yuvarlama ---------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-full: 999px;

    /* ---------- Gölge ---------- */
    --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.06);
    --shadow-md: 0 4px 12px rgba(20, 23, 26, 0.08);
    --shadow-lg: 0 12px 32px rgba(20, 23, 26, 0.12);

    /* ---------- Hareket ---------- */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* ---------- Katman sırası ---------- */
    --z-base: 1;
    --z-header: 100;
    --z-overlay: 200;

    /* ---------- Kırılım noktaları ----------
       NOT: CSS değişkenleri @media içinde kullanılamaz. Bu değerler
       referanstır; medya sorgularında aynı sayılar elle yazılır.
       sm 480px | md 768px | lg 1024px | xl 1280px
       -------------------------------------- */
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 1024px;
    --bp-xl: 1280px;
}

/* Geniş ekranda bölüm boşlukları ve başlık ölçeği biraz açılır. */
@media (min-width: 768px) {
    :root {
        --gutter: var(--space-5);
        --section-y: var(--space-9);
        --header-height: 72px;
    }
}