/* ============================================================
   DESIGN TOKENS — Mimarlık Sitesi Tasarım Rehberi'ne göre
   (assets/css/.. üst dizinindeki mimarlik-sitesi-tasarim-rehberi.md.md)

   Bütün tasarım kararları burada. Renk/spacing/font değiştirmek
   için ilk durak burası. Component CSS'lerinde hardcoded değer
   YAZMA — sadece token kullan.
   ============================================================ */

:root {
  /* ===== Color (Light — default) =====
     Kurumsal palet: charcoal #1A1A1A + muted teal #6FA8B5 (logo'dan).
     Vurgu rengi sadece CTA, hover, badge gibi küçük detaylarda. */
  --color-bg:          #FFFFFF;  /* saf beyaz */
  --color-bg-alt:      #F5F5F0;  /* kırık beyaz / bej */
  --color-text:        #333333;  /* gövde metni */
  --color-heading:     #1A1A1A;  /* başlıklar — neredeyse siyah */
  --color-text-muted:  #888888;  /* ikincil metin */
  --color-border:      #E0E0E0;  /* çizgi / ayırıcı */
  --color-accent:      #6FA8B5;  /* kurumsal teal — logo'dan */
  --color-accent-ink:  #FFFFFF;  /* accent üstüne gelen yazı */

  /* ===== Typography =====
     Rehber: sans-serif, geometrik/grotesque. Tercih: Inter.
     Self-host eklenmediyse system fallback'lar devrede. */
  --font-sans:    'Inter', 'Helvetica Neue', -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  /* Responsive semantic sizes (rehberdeki clamp değerleri) */
  --text-hero:    clamp(2.5rem, 5vw, 5rem);       /* 40 → 80px (h1, hero) */
  --text-display: clamp(2rem, 4vw, 3.5rem);       /* 32 → 56px (büyük display) */
  --text-h2:      clamp(1.5rem, 3vw, 2rem);       /* 24 → 32px */
  --text-h3:      clamp(1.25rem, 2.5vw, 1.5rem);  /* 20 → 24px */

  /* Static type scale (utility — etiket/eyebrow/küçük metin) */
  --text-xs:    0.75rem;    /* 12 — caption */
  --text-sm:    0.875rem;   /* 14 — small */
  --text-base:  1rem;       /* 16 — body */
  --text-lg:    1.125rem;   /* 18 — body large */
  --text-xl:    1.25rem;    /* 20 */
  --text-2xl:   1.5rem;     /* 24 */
  --text-3xl:   2rem;       /* 32 */
  --text-4xl:   2.5rem;     /* 40 */
  --text-5xl:   3.5rem;     /* 56 */
  --text-6xl:   5rem;       /* 80 */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* Rehber: başlıklarda hafif açık letter-spacing (0.05em – 0.1em) */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;

  /* Rehber: başlıklar 600–700, gövde 300–400 */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ===== Spacing =====
     Rehber: bölümler arası 80-160px, eleman 24-48px, iç padding 24-32px */
  --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 */
  --space-10: 8rem;      /* 128 */
  --space-11: 12rem;     /* 192 */

  /* ===== Layout =====
     Rehber: max container 1200-1400px, section padding 80-160px clamp */
  --container-max: 1400px;
  --container-pad: var(--space-5);
  --section-y:     clamp(5rem, 10vw, 10rem);  /* 80 → 160px */

  /* ===== Borders & radii =====
     Rehber: keskin kenar = yapısal his.
     Butonlar 0-2px, kartlar 0-4px, görseller 0px. */
  --radius-none: 0;
  --radius-sm:   0;       /* default sharp */
  --radius-md:   2px;     /* button, input */
  --radius-lg:   4px;     /* card, modal */
  --radius-pill: 999px;   /* tag/pill ihtiyaç olursa */

  --border-thin: 1px solid var(--color-border);

  /* ===== Shadows =====
     Rehber: "çok hafif, geniş yayılımlı (soft shadow)". Belirgin gölge yok. */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.06);

  /* ===== Motion =====
     Rehber: 300-600ms, ease-out / cubic-bezier */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --duration-fast:  300ms;
  --duration-base:  450ms;
  --duration-slow:  600ms;

  /* ===== Z-index ===== */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}

/* ===== Dark theme — opsiyonel =====
   Aktif etmek için <html data-theme="dark"> veya body üstüne eklenir.
   Renk değerleri rehberden. */
[data-theme="dark"] {
  --color-bg:          #0D0D0D;
  --color-bg-alt:      #1A1A1A;
  --color-text:        #D4D4D4;
  --color-heading:     #FFFFFF;
  --color-text-muted:  #888888;
  --color-border:      #2A2A2A;
  --color-accent:      #6FA8B5;
  --color-accent-ink:  #FFFFFF;
}

/* Breakpoint'ler (preprocessor yok — inline media query kullan):
     sm:  640px
     md:  768px
     lg:  1024px
     xl:  1280px
     2xl: 1536px
*/