/* ============================================================
   tokens.css — İsmail Turgut Öksüz · TASARIM TOKEN SİSTEMİ
   Tek kaynak. Renk/tipografi/spacing HARDCODE YASAK — hep buradan.
   Marka laciverti #033e60 (logo). Başlık: Fraunces · Gövde: Quicksand.
   ============================================================ */

@import url("../fonts/fonts.css");

:root {
  /* — Marka (lacivert) rampası — #033e60 = 700 — */
  --brand-50:  #eef4f8;
  --brand-100: #d9e6ef;
  --brand-200: #b3cddf;
  --brand-300: #80a9c5;
  --brand-400: #4a7fa3;
  --brand-500: #1d5b84;
  --brand-600: #0a4a72;
  --brand-700: #033e60;   /* logo laciverti */
  --brand-800: #022f49;
  --brand-900: #02213a;
  --brand-950: #011524;

  /* — Mürekkep (ink) — hafif soğuk, lacivertle uyumlu — */
  --ink-900: #11171c;
  --ink-800: #1d252c;
  --ink-700: #36414a;
  --ink-600: #56626c;
  --ink-500: #76818a;
  --ink-400: #9aa3aa;

  /* — Yüzeyler — beyaz + lacivertin soğuk, mavimsi buz grisi (sıcak ton yok) — */
  --surface:      #ffffff;
  --surface-alt:  #f2f5f8;   /* zebra bölümlerin ikincisi, görsel yer tutucu zemini */
  --white:        #ffffff;

  /* — Çizgiler — */
  --border:    #dce3ea;
  --line-dark: rgba(255,255,255,.16);
  --line-dark-soft: rgba(255,255,255,.08);
  --scrim: rgba(4,18,28,.96);   /* lightbox / video modal zemini */

  /* — Aksan — marka laciverti; sıcak vurgu yalnız "Hâlen" rozetinde — */
  --accent:       var(--brand-700);
  --accent-hover: var(--brand-600);
  --accent-text:  var(--brand-700);
  --accent-tint:  rgba(3,62,96,.07);
  --ok:           #2f8f5b;   /* "Tamamlandı" durum noktası */
  --black:        #000000;
  --danger:       #9b2c2c;
  --danger-ink:   #7c2222;
  --danger-tint:  #fff0f0;
  --danger-line:  #e7bcbc;
  --warm:         #b4772b;   /* ölçülü vurgu: "Hâlen", devam eden rozeti */
  --warm-tint:    rgba(180,119,43,.12);

  /* — Anlamsal atamalar — */
  --bg:       var(--surface);
  --fg:       var(--ink-900);
  --fg-muted: #6b7785;

  /* — Tipografi aileleri — */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    "Quicksand", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* — Tip ölçeği (akışkan). Banner hariç hiçbir başlık 48px'i geçmez; bölüm ≤32px, detay ≤40px, page-hero ≤44px. — */
  --fs-display: clamp(2.1rem, 1.1rem + 4.4vw, 4.5rem);          /* yalnız banner (≤72px) */
  --fs-h1:      clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);        /* liste page-hero (≤44px) */
  --fs-detail:  clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);        /* detay başlığı (26→40px) */
  --fs-h2:      clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);       /* bölüm başlığı 26→36px (§30) */
  --fs-h3:      clamp(1.1rem, 1.02rem + .5vw, 1.4rem);
  --fs-card:    clamp(1rem, .94rem + .3vw, 1.1875rem);          /* kart başlığı 16→19px */
  --fs-h4:      var(--fs-card);
  --fs-lead:    clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-body:    1.0625rem;   /* 17px */
  --fs-detail-body: clamp(1rem, .96rem + .2vw, 1.125rem);       /* 16→18px */
  --fs-sm:      0.95rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-body:  1.7;

  --ls-display: -0.028em;
  --ls-heading: -0.018em;
  --ls-eyebrow: 0.16em;

  /* — Ağırlıklar — */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700;

  /* — Spacing (8px tabanlı) — */
  --sp-icon: .25rem; --sp-20: 1.25rem; --sp-40: 2.5rem; --sp-12: .75rem; --sp-1: .5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;  --sp-6: 4rem; --sp-7: 6rem;

  --section-y: clamp(2.5rem, 1.6rem + 3.6vw, 5rem);
  --gutter:    clamp(1.125rem, .6rem + 2.2vw, 3rem);   /* mobil 18px */
  --maxw: 1280px;
  --maxw-narrow: 920px;
  --maxw-detail: 1140px;
  --maxw-content: 760px;
  --maxw-text: 68ch;

  /* — Biçim — yalnız 3 radius token'ı (pill/yuvarlak YOK) — */
  --radius-sm: 4px;    /* chip, etiket, rozet, input, küçük buton */
  --radius:    6px;    /* buton, kart, görsel, dropdown, slider oku, ikon butonu */
  --radius-lg: 10px;   /* modal, lightbox, büyük blok */

  --sh-1: 0 1px 2px rgba(2,33,58,.05), 0 8px 24px rgba(2,33,58,.07);
  --sh-2: 0 2px 6px rgba(2,33,58,.07), 0 22px 48px rgba(2,33,58,.13);

  /* — Hareket — */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur: .6s;
  --dur-fast: .24s;

  /* — Header — */
  --header-h: 96px;
  --header-h-compact: 72px;
  --icon-sm: 14px; --icon: 16px; --icon-md: 20px; --icon-lg: 32px; --icon-xl: 40px;
  --logo-h: 48px;
  --page-hero-pb: clamp(1.5rem, 1rem + 2vw, 3rem);
  --nav-gap: clamp(.25rem, .6vw, 1rem);
  --hero-pad-b: clamp(5rem, 9vw, 8rem);
  --tabs-gap: clamp(1.25rem, .6rem + 2.4vw, 3rem);
  --tabs-mb: clamp(1.5rem, 1rem + 2vw, 3rem);
  --grid-gap-y: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  --split-gap: clamp(2rem, 1rem + 5vw, 6rem);
  --media-gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --pager-mt: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --contact-gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  --card-pad: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  --footer-pb: clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --cookie-gap: clamp(1rem, .6rem + 2vw, 2.5rem);
  --grid-gap-x: clamp(1rem, .8rem + 1.2vw, 1.75rem);

  --stat-overlap: 78px;   /* sayaç kartının hero'ya bindirmesi ≈ kart yüksekliğinin yarısı (mobilde 0) */
}