/* Tokenler — A) kanonik (--c-*, --fs-*, --s-*)  B) tema alias'ı (--color-*…).
   Başka CSS dosyası sabit hex/px GÖMMEZ. "ölçüm" = canlı style.css değeri.
   Gerekçeler ve kontrast hesapları: scratchpad/revize-kabuk.md */

/* ===== A — KANONİK ===== */

:root {
	/* Nötr — --c-ground: sayfa zemini.
	   CANLIYA SADIK: canlı site `body { background-color: #fff }` kullanıyor
	   (css/style.css:114) ve kartları yalnızca gölgeyle ayırıyor. Ajanlar
	   burada gri (#f4f5f7) önermişti — mobilde 4px gölgenin kart sınırını
	   yeterince taşımadığı gerekçesiyle. Gerekçe teknik olarak geçerli, ama
	   kullanıcı açıkça "mevcuttaki mantıkta olmalı" dedi; ölçülen değerden
	   sapmıyoruz. Gri denemek istenirse DEĞİŞTİRİLECEK TEK SATIR burasıdır. */
	--c-ground: #ffffff;
	--c-paper: #ffffff;
	--c-surface: #f8f9fa; /* ölçüm: .cumleler zemini */
	--c-line: #ebebeb; /* ölçüm */
	--c-ink: #333333; /* ölçüm */
	--c-muted: #555555; /* ölçüm */
	--c-faint: #6b6e73;

	/* Marka — ölçüm #E30A16; beyazda 4,86:1 */
	--c-brand: #e30a16;
	--c-brand-tint: #fdecec;
	--c-brand-deep: #b80812; /* kırmızı dolgu üstünde hover (7,04:1) */

	/* Artikel — beyazda 6,55–7,19:1; ΔE ≥ 26 (üç dikromazi) */
	--c-der: #1256a8;
	--c-der-tint: #eaf1fa;
	--c-die: #a81e6e;
	--c-die-tint: #fbeaf3;
	--c-das: #1c6b37;
	--c-das-tint: #e9f3ec;

	/* --c-mark (#FFC107) YALNIZCA zemin; üstüne --c-mark-ink (8,26:1). */
	--c-mark: #ffc107;
	--c-mark-ink: #3a2c00;
	--c-mark-deep: #e0a800; /* sarı dolgu üstünde hover */
	--c-ok: #0f6b3f;
	--c-ok-bg: #e9f5ee;
	--c-warn: #8a4b00; /* --c-warn-bg üstünde 6,44:1 */
	--c-warn-bg: #fff8e1; /* ölçüm ~#fff3cd, bir tık açıldı */
	--c-warn-line: #f0cf6e;
	--c-panel: var(--c-line); /* panel zemini (canlı #ebebeb) */
	--c-trend: #0c616e; /* "TREND zurzeit" başlığı, beyazda 7,12:1 */
	--c-err: #a3161c;
	--c-err-bg: #fdeded;

	/* Bayrak (inline SVG) */
	--c-flag-de-1: #000000;
	--c-flag-de-2: #dd0000;
	--c-flag-de-3: #ffce00;
	--c-flag-tr: #e30a17; /* ölçüm */

	/* Odak halkası — her zeminde ≥10,6:1 (WCAG 2.4.7) */
	--focus-ring: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-ink);

	/* Yazı aileleri */
	--f-ui: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--f-de: "Literata", Georgia, "Times New Roman", serif;

	/* Tip ölçeği — taban 17px */
	--fs-100: 0.75rem;
	--fs-200: 0.875rem;
	--fs-300: 1.0625rem;
	--fs-400: 1.125rem; /* ölçüm: cümle satırı 18px */
	--fs-500: 1.25rem;
	--fs-600: 1.5rem;
	--fs-700: 2.25rem;
	--fs-800: clamp(2.25rem, 8.5vw, 3.25rem);

	/* Kart başlığı imzası — ölçüm 16px/700/uppercase/ls 1px */
	--fs-eyebrow: 0.9375rem;
	--ls-eyebrow: 0.07em;

	--lh-tight: 1.08;
	--lh-snug: 1.22;
	--lh-normal: 1.45;
	--lh-body: 1.6;
	--lh-de: 1.68;

	--ls-display: -0.022em;
	--ls-head: -0.012em;
	--ls-label: 0.015em;

	--measure-tr: 66ch;
	--measure-de: 72ch;

	/* Boşluk (4px tabanlı) */
	--s-1: 0.25rem;
	--s-2: 0.5rem;
	--s-3: 0.75rem;
	--s-4: 1rem;
	--s-5: 1.5rem;
	--s-6: 2rem;
	--s-7: 3rem;
	--s-8: 4rem;

	/* Düzen — ölçüm: .container 1140px, sağ ray 300px */
	--page-gutter: var(--s-4);
	--page-max: 71.25rem;
	--content-max: 40rem;
	--content-col: 53.5rem; /* ölçüm: canlı içerik sütunu 855px */
	--rail-w: 18.75rem;
	--rail-gap: var(--s-5);
	--tap-min: 2.75rem; /* 44px — WCAG 2.5.8 */

	/* Yarıçap */
	--r-none: 0;
	--r-xs: 3px;
	--r-sm: 5px; /* ölçüm: .report-btn */
	--r-md: 10px;
	--r-lg: 16px; /* ölçüm: .custom-badge */
	--r-pill: 999px; /* ölçüm: .btn 50px */

	/* Kart — ölçüm: padding 16px, gölge 0 4px 15px rgb(0 0 0/.1) */
	--card-pad: var(--s-4);
	--card-pad-lg: var(--s-5);
	--r-card: 12px;
	--sh-card: 0 1px 2px rgb(0 0 0 / 4%), 0 4px 15px rgb(0 0 0 / 10%);
	--sh-pop: var(--sh-card);
	--sh-drawer: 0 0 0 1px rgb(0 0 0 / 6%), 0 24px 48px -12px rgb(0 0 0 / 28%);

	/* Kırmızı dikey çizgi — ölçüm 5px */
	--rule-w: 4px;

	/* Sarı eğik numara pili — ölçüm 60×25, rotate(-25deg) */
	--badge-w: 3.25rem;
	--badge-h: 1.5rem;
	--badge-rot: -20deg;

	/* Bayrak ikonu — ölçüm 20px */
	--flag-size: 1.25rem;

	/* Kenarlık */
	--b-hair: 1px solid var(--c-line);
	--b-solid: 1px solid #dcdcdc;

	/* Hareket */
	--t-fast: 120ms cubic-bezier(0.2, 0, 0.4, 1);
	--t-base: 200ms cubic-bezier(0.2, 0, 0.2, 1);
}

@media (min-width: 40em) {
	:root {
		--page-gutter: var(--s-5);
	}
}

/* ===== B — TEMA ALIAS'LARI (tema CSS'i bu isimleri kullanır) ===== */

:root {
	/* Renk */
	--color-brand: var(--c-brand);
	--color-brand-ink: var(--c-paper);
	--color-brand-soft: var(--c-brand-tint);
	--color-brand-hover: var(--c-brand-deep);

	--color-accent: var(--c-mark);
	--color-accent-ink: var(--c-mark-ink);
	--color-accent-hover: var(--c-mark-deep);

	--color-text: var(--c-ink);
	--color-text-muted: var(--c-muted);
	--color-text-faint: var(--c-faint);
	--color-heading: var(--c-ink);

	--color-ground: var(--c-ground);
	--color-surface: var(--c-paper);
	--color-surface-muted: var(--c-surface);

	--color-border: var(--c-line);
	--color-border-strong: #dcdcdc;

	--color-note-bg: var(--c-warn-bg);
	--color-note-line: var(--c-warn-line);
	--color-note-ink: var(--c-warn);
	--color-panel: var(--c-panel);
	--color-trend: var(--c-trend);

	/* Bağlantı metin renginde; kırmızı yalnızca hover (canlı hover 1,63:1'di) */
	--color-link: var(--c-ink);
	--color-link-hover: var(--c-brand);
	--color-focus: var(--c-ink);

	--color-artikel-der: var(--c-der);
	--color-artikel-die: var(--c-die);
	--color-artikel-das: var(--c-das);
	--color-artikel-der-soft: var(--c-der-tint);
	--color-artikel-die-soft: var(--c-die-tint);
	--color-artikel-das-soft: var(--c-das-tint);

	/* Yazı */
	--font-sans: var(--f-ui);
	--font-serif-de: var(--f-de);

	--weight-normal: 400;
	--weight-medium: 600;
	--weight-bold: 700;

	--text-xs: var(--fs-100);
	--text-sm: var(--fs-200);
	--text-base: var(--fs-300);
	--text-md: var(--fs-300);
	--text-lg: var(--fs-400);
	--text-xl: var(--fs-500);
	--text-2xl: var(--fs-600);
	--text-3xl: var(--fs-700);
	--text-display: var(--fs-800);
	--text-eyebrow: var(--fs-eyebrow);

	--leading-tight: var(--lh-snug);
	--leading-snug: var(--lh-normal);
	--leading-normal: var(--lh-body);
	--leading-relaxed: var(--lh-de);

	--tracking-tight: var(--ls-head);
	--tracking-display: var(--ls-display);
	--tracking-wide: var(--ls-label);
	--tracking-eyebrow: var(--ls-eyebrow);

	/* Boşluk */
	--space-1: var(--s-1);
	--space-2: var(--s-2);
	--space-3: var(--s-3);
	--space-4: var(--s-4);
	--space-5: var(--s-5);
	--space-6: var(--s-6);
	--space-7: var(--s-7);

	/* Ölçü */
	--radius-sm: var(--r-xs);
	--radius: var(--r-sm);
	--radius-lg: var(--r-md);
	--radius-card: var(--r-card);
	--radius-pill: var(--r-pill);
	--border-width: 1px;
	--border-width-thick: 2px;
	--rule-width: var(--rule-w);
	--rule-color: var(--c-brand);
	--shadow: var(--sh-card);
	--shadow-card: var(--sh-card);
	--shadow-drawer: var(--sh-drawer);
	--shadow-scroll: inset -14px 0 12px -12px rgb(0 0 0 / 22%);
	--card-padding: var(--card-pad);
	--size-flag: var(--flag-size);
	--badge-width: var(--badge-w);
	--badge-height: var(--badge-h);
	--badge-rotate: var(--badge-rot);

	/* Düzen */
	--wrap-max: var(--page-max);
	--prose-max: var(--measure-tr);
	--prose-max-de: var(--measure-de);
	--gutter: var(--page-gutter);

	/* Hareket + odak */
	--ease: cubic-bezier(0.2, 0, 0.2, 1);
	--duration: 200ms;
	--focus-width: 3px;
	--focus-offset: 2px;

	/* Katman */
	--z-header: 10;
	--z-suggest: 20;
	--z-skip: 100;
}

@media (min-width: 40em) {
	:root {
		--card-padding: var(--card-pad-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}