/*
 * Semantik design token'lar.
 * Ham renk/font/boşluk DEĞERLERİ theme.json'dadır (tek kaynak); burada yalnızca anlamsal eşlemeler vardır.
 *
 * Renk kapsamları:
 *   :root / .is-light            → açık palet (varsayılan)
 *   .is-cinema                   → temadan BAĞIMSIZ sinematik koyu sahne (ürün hero, hikâye bölümleri, tam ekran galeri)
 * Header/diyaloglar `.is-light`tır: resmi "reversed" logo olmadığı için logo yalnızca açık zeminde kullanılır.
 */
:root,
.is-light {
	color-scheme: light;
	--color-brand: var(--wp--preset--color--brand);
	--color-brand-deep: var(--wp--preset--color--brand-deep);
	--color-brand-dark: var(--wp--preset--color--brand-dark);
	--color-gold: var(--wp--preset--color--gold);
	--color-gold-muted: var(--wp--preset--color--gold-muted);
	--color-background: var(--wp--preset--color--background);
	--color-surface: var(--wp--preset--color--surface);
	--color-surface-alt: var(--wp--preset--color--surface-alt);
	--color-text: var(--wp--preset--color--text);
	--color-text-muted: var(--wp--preset--color--text-muted);
	--color-border: var(--wp--preset--color--border);
	--color-on-brand: var(--wp--preset--color--on-brand);
	--color-focus: var(--wp--preset--color--focus);

	--btn-primary-bg: var(--color-brand);
	--btn-primary-fg: var(--color-on-brand);
	--btn-primary-hover-bg: var(--color-brand-deep);
	--btn-secondary-fg: var(--color-brand);
	--btn-secondary-border: var(--color-brand);
	--btn-secondary-hover-bg: var(--color-brand);
	--btn-secondary-hover-fg: var(--color-on-brand);
}

.is-cinema {
	color-scheme: dark;
	--color-brand: var(--wp--preset--color--dark-text); /* koyu zeminde vurgu rengi = sıcak beyaz */
	--color-on-brand: var(--wp--preset--color--dark-background);
	--color-gold-muted: var(--wp--preset--color--gold);
	--color-background: var(--wp--preset--color--dark-background);
	--color-surface: var(--wp--preset--color--dark-surface);
	--color-surface-alt: var(--wp--preset--color--dark-surface-alt);
	--color-text: var(--wp--preset--color--dark-text);
	--color-text-muted: var(--wp--preset--color--dark-muted);
	--color-border: var(--wp--preset--color--dark-border);
	--color-focus: var(--wp--preset--color--gold);

	--btn-primary-bg: var(--color-text);
	--btn-primary-fg: var(--color-background);
	--btn-primary-hover-bg: var(--color-gold);
	--btn-secondary-fg: var(--color-text);
	--btn-secondary-border: var(--color-text);
	--btn-secondary-hover-bg: var(--color-text);
	--btn-secondary-hover-fg: var(--color-background);
}

/* Sinematik bölgeler: açık sayfanın içinde derin yeşil-siyah sahneler. */
.is-cinema {
	--color-background: var(--wp--preset--color--cinema);
}

/* Gradient sistemi: açık taban sıcak kağıt tonları, koyu bölgeler yeşil → siyah geçişli. */
:root {
	--gradient-paper: linear-gradient(180deg, #ffffff 0%, var(--wp--preset--color--background) 38%, var(--wp--preset--color--surface) 100%);
	--gradient-paper-soft: linear-gradient(180deg, var(--wp--preset--color--background) 0%, var(--wp--preset--color--surface) 100%);
	--gradient-panel: linear-gradient(160deg, #ffffff 0%, var(--wp--preset--color--background) 70%);
	--gradient-cinema:
		radial-gradient(ellipse 70% 90% at 12% 0%, color-mix(in srgb, var(--wp--preset--color--brand) 70%, transparent), transparent 62%),
		radial-gradient(ellipse 50% 70% at 100% 100%, color-mix(in srgb, var(--wp--preset--color--gold) 16%, transparent), transparent 70%),
		linear-gradient(135deg, var(--wp--preset--color--brand-deep) 0%, var(--wp--preset--color--dark-background) 45%, var(--wp--preset--color--cinema) 100%);
	--shadow-soft: 0 1.5rem 3rem -1.75rem rgb(6 53 41 / 0.35);
}

:root {
	/* Tipografi */
	--font-sans: var(--wp--preset--font-family--sans);
	--font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--text-small: var(--wp--preset--font-size--small);
	--text-body: var(--wp--preset--font-size--body);
	--text-label: var(--wp--preset--font-size--label);
	--text-h6: var(--wp--preset--font-size--heading-6);
	--text-h5: var(--wp--preset--font-size--heading-5);
	--text-h4: var(--wp--preset--font-size--heading-4);
	--text-h3: var(--wp--preset--font-size--heading-3);
	--text-h2: var(--wp--preset--font-size--heading-2);
	--text-h1: var(--wp--preset--font-size--heading-1);
	--text-display: var(--wp--preset--font-size--display);
	--leading-tight: 1.1;
	--leading-snug: 1.3;
	--leading-body: 1.6;
	--tracking-label: 0.14em;
	--tracking-nav: 0.08em;

	/* Boşluk */
	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-5: var(--wp--preset--spacing--5);
	--space-6: var(--wp--preset--spacing--6);
	--space-7: var(--wp--preset--spacing--7);
	--space-8: var(--wp--preset--spacing--8);
	--space-9: var(--wp--preset--spacing--9);
	--space-10: var(--wp--preset--spacing--10);

	/* Container (rem tabanlı: 1920/2560'ta html font-size ile birlikte ölçeklenir) */
	--gutter: clamp(1.25rem, 3vw, 4rem);
	--container-max: var(--wp--style--global--wide-size);
	--container-narrow: var(--wp--style--global--content-size);
	--grid-gap: var(--space-6);

	/* Datasheet/teknik çizim görselleri saf beyaz zeminlidir; "kağıt" yüzeyi her temada aynı kalır. */
	--color-paper: #ffffff;

	/* Şekil: keskin, mimari */
	--radius: 0;
	--radius-sm: 2px;
	--border-w: 1px;

	/* Oranlar */
	--ratio-card: 4 / 3;
	--ratio-hero: 16 / 9;
	--ratio-project: 3 / 2;

	/* Hareket */
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 700ms;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);

	/* Erişilebilirlik */
	--focus-ring: 2px solid var(--color-focus);
	--focus-offset: 3px;
	--target-min: 3rem;

	/* Header */
	--header-h: 4.5rem;
	--logo-h: 1.25rem;

	/* Buton / form */
	--btn-h: 3rem;
	--btn-px: var(--space-6);
	--field-h: 3rem;
	--field-border: var(--color-border);
	--field-border-focus: var(--color-brand);

	/* Katmanlar */
	--z-header: 100;
	--z-dialog: 200;
}

@media (min-width: 1024px) {
	:root {
		--header-h: 5rem;
		--logo-h: 1.5rem;
	}
}