/* tokens.css — CSS özel özellikleri (design tokens)
 * Tüm renk, tipografi ve aralık değerleri buradan yönetilir.
 * Marka rengi logo.png'den örneklendi: kurumsal mavi #1357A0, metin #1D1D1B.
 */

:root {
    /* ── Marka Renkleri (logodan örneklendi) ────────────────────────────── */
    --color-primary:        #165399;   /* Atlas kurumsal mavisi (logo açık mavi) */
    --color-primary-hover:  #124580;   /* buton hover */
    --color-primary-dark:   #0F3A6B;   /* koyu mavi — vurgu/derinlik */
    --color-navy:           #101840;   /* en koyu lacivert — hero/footer zemini */
    --color-accent:         #1B9CE6;   /* parlak vurgu — ikon/link accent */
    --color-secondary:      #0F3A6B;

    /* ── Nötr / Yüzey ───────────────────────────────────────────────────── */
    --color-background:     #ffffff;
    --color-surface:        #f4f7fb;   /* açık mavi-gri bölüm zemini */
    --color-surface-2:      #eaf1f9;   /* tint kart/hover */
    --color-text:           #1d1d1b;   /* logo metin siyahı */
    --color-text-muted:     #5b6470;
    --color-text-invert:    #ffffff;
    --color-border:         #e2e8f0;
    --color-border-strong:  #cbd5e1;
    --color-star:           #f5a623;   /* puanlama yıldızı (mavi accent puan gibi okunmuyor) */

    /* ── Durum (form mesajları) ─────────────────────────────────────────── */
    --color-success:        #16794c;
    --color-success-bg:     #e7f6ee;
    --color-danger:         #b42318;
    --color-danger-bg:      #fdecea;

    /* ── Odak halkası (erişilebilirlik) ─────────────────────────────────── */
    --focus-ring:           0 0 0 3px rgb(22 83 153 / 0.35);

    /* ── Tipografi ──────────────────────────────────────────────────────── */
    --font-heading: "Exo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono:    ui-monospace, "SFMono-Regular", Menlo, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    --leading-tight:  1.25;
    --leading-snug:   1.375;
    --leading-normal: 1.5;
    --leading-loose:  1.75;

    /* ── Aralıklar ──────────────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-7:  1.75rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout ─────────────────────────────────────────────────────────── */
    --container-sm:  640px;
    --container-md:  768px;
    --container-lg:  1024px;
    --container-xl:  1200px;
    --container-2xl: 1720px;
    --header-height: 76px;

    /* ── Köşe yarıçapları ───────────────────────────────────────────────── */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;
    --radius-full: 9999px;

    /* ── Gölgeler ───────────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgb(8 39 68 / 0.06);
    --shadow-md: 0 4px 12px rgb(8 39 68 / 0.08);
    --shadow-lg: 0 12px 28px rgb(8 39 68 / 0.12);
    --shadow-primary: 0 8px 20px rgb(22 83 153 / 0.28);

    /* ── Geçişler ───────────────────────────────────────────────────────── */
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --ease-default:    ease-in-out;
}