/* ==========================================================================
   torulli · tasarım tokenları (Faz 2, 18.10.2026)
   Tüm renk, yazı ve ölçü değerlerinin tek kaynağı. Diğer CSS dosyaları
   yalnızca bu değişkenleri kullanır; sabit renk yazılmaz.
   Kontrast değerleri WCAG 2.1 oranlarıdır (4.5 = normal metin eşiği).
   ========================================================================== */
:root {
  /* Koyu zeminler */
  --c-ink-900: #0d100e; /* hero, footer, sahne arka planı */
  --c-ink-800: #141815; /* koyu bölüm */
  --c-ink-700: #1c221e; /* koyu kart / yükseltilmiş yüzey */
  --c-line-dark: rgba(255, 255, 255, 0.14);

  /* Açık zeminler */
  --c-paper-100: #f1ede4; /* ana sayfa zemini */
  --c-paper-200: #e4ded3; /* ara bant */
  --c-paper-300: #d3ccbf; /* vurgulu bant */
  --c-line-light: rgba(20, 23, 20, 0.18);

  /* Koyu zeminde metin  (ink-800 üzerinde kontrast) */
  --c-text-inv: #f1eee7; /* 15.5 */
  --c-text-inv-2: #bcc2bc; /*  9.9 · ikincil */
  --c-text-inv-3: #959d96; /*  6.4 · etiket, not */

  /* Açık zeminde metin  (paper-100 / paper-300 üzerinde) */
  --c-text: #141714; /* 15.5 / 11.3 */
  --c-text-2: #4a4f4a; /*  7.2 /  5.2 */
  --c-text-3: #53574f; /*  6.3 /  4.6 */

  /* Marka vurgusu: bakır */
  --c-copper: #c99a62; /* koyu zeminde vurgu · 7.1 */
  --c-copper-hi: #e2b680; /* koyu zeminde hover · 9.6 */
  --c-copper-deep: #6e4a26; /* açık zeminde bakır metin · 6.7 / 4.9 */
  --c-copper-fill: #b98a52; /* düğme dolgusu (üzerinde ink-900 metin) */
  --c-copper-display: #94663a; /* açık zeminde yalnız büyük başlık vurgusu (≥24px) · 4.3 / 3.1 */
  --c-copper-display: #94663a; /* açık zeminde yalnız büyük başlık vurgusu (≥24px) · 4.3 / 3.1 */

  /* Uyarı bandı (beyaz metin 6.6) */
  --c-warn: #8f4a2a;

  /* Uyarı bandı (beyaz metin 6.6) */
  --c-warn: #8f4a2a;

  /* Uyarı bandı (beyaz metin 6.6) */
  --c-warn: #8f4a2a;

  /* Uyarı bandı (beyaz metin 6.6) */
  --c-warn: #8f4a2a;

  /* Durum */
  --c-ok: #7fa889;
  --c-ok-bg: #203729;
  --c-err: #c97a6e;
  --c-err-bg: #3a2522;

  /* Yazı aileleri */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans: Manrope, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-reading: Georgia, "Times New Roman", serif;

  /* Yazı ölçeği — en küçük metin 11 px */
  --fs-label: 11px; /* BÜYÜK HARF etiket, letter-spacing .14em */
  --fs-small: 13px; /* not, dipnot, düğme */
  --fs-copy: 15px; /* arayüz paragrafı: kart, hero, açıklama metni */
  --fs-body: 16px; /* gövde */
  --fs-lead: clamp(17px, 1.3vw, 19px);
  --fs-h4: clamp(22px, 2vw, 28px);
  --fs-h3: clamp(28px, 3vw, 40px);
  --fs-h2: clamp(40px, 5vw, 72px);
  --fs-h1: clamp(48px, 6.6vw, 96px);
  --fs-display: clamp(56px, 8vw, 116px);
  --lh-tight: 0.95;
  --lh-head: 1.05;
  --lh-body: 1.75;
  --ls-label: 0.14em;
  --ls-head: -0.03em;

  /* Ölçü */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: clamp(80px, 10vw, 140px);
  --gutter: clamp(20px, 6vw, 120px);
  --radius: 2px;
  --header-h: 76px;
}

/* Eski değişken adları → tokenlar. Mevcut CSS'te tanımsız kullanılan
   --serif / --sans (bazı başlıkların yanlış yazı tipinde çıkmasına neden oluyordu)
   burada tanımlanıyor. Faz 3'te eski adlar tamamen kaldırılacak. */
:root {
  --serif: var(--font-serif);
  --sans: var(--font-sans);
  /* Bağlamsal bakır: açık zeminde koyu bakır; koyu zemin tanımlayan kurallar bunu --c-copper yapar. */
  --accent-tx: var(--c-copper-deep);
  --accent-display: var(--c-copper-display);
}

/* --------------------------------------------------------------------------
   Yüzey bağlamı. Ortak kurallar (ör. başlık içindeki italik em, .eyebrow)
   --tx / --tx-2 / --tx-3 / --accent-tx kullanır; değer, öğenin üzerinde
   durduğu yüzeye göre buradan gelir. Liste sitede ölçülerek çıkarıldı.
   -------------------------------------------------------------------------- */
:root {
  --tx: var(--c-text);
  --tx-2: var(--c-text-2);
  --tx-3: var(--c-text-3);
}
.site-header,
.home-hero,
.home-hero__image,
.home-hero__shade,
.wear-story,
.button.button--dark,
.knowledge-hub,
.hub-card.hub-card--large,
.hub-card,
.home-quote,
.learning-hero,
.lesson-hero,
.experience-workbench,
.experience-panels,
.engineering-file,
.equation-card,
.engineering-grid,
.lesson-quiz.visual-quiz,
.quiz-media,
.quiz-options,
.lesson-footer-nav.course-neighbors,
.eta-lab-stage,
.position-workbench,
.position-results,
.lab-warning,
.text-hero.mechanical-hero,
.knowledge-notes,
.mechanical-cta,
.lesson-quiz.custom-complete,
.text-hero.gear-hero,
.two-trains,
.mechanical-cta.lesson-nav,
.text-hero.escapement-hero,
.sound-anatomy,
.text-hero.automatic-hero,
.truth-cards,
.eta-lab-status,
.eta-lab-controls,
.eta-lab-help,
.assembly-completion,
.library-hero,
.library-image,
.article-hero,
.text-hero,
.values-context,
.editorial-hero,
.concept-notice,
.auth-page,
.profile-page,
body > footer {
  --tx: var(--c-text-inv);
  --tx-2: var(--c-text-inv-2);
  --tx-3: var(--c-text-inv-3);
  --accent-tx: var(--c-copper);
  --accent-display: var(--c-copper);
}
.hub-card.hub-card--light {
  --tx: var(--c-text);
  --tx-2: var(--c-text-2);
  --tx-3: var(--c-text-3);
  --accent-tx: var(--c-copper-deep);
  --accent-display: var(--c-copper-display);
}