/**
 * Tam Renk Design System — tokens (Faz 2).
 *
 * Single source of truth for colour, type, space, radius, elevation, motion
 * and layering. Components use these variables only — never raw values.
 * Documentation: docs/design-system/README.md
 *
 * Contrast (WCAG 2.2, measured):
 *   ink on paper 17.0 · text-muted on paper 6.4 · text-muted on surface-soft 5.7
 *   paper on magenta 4.54 (fills) · magenta-text on paper 5.87, on
 *   surface-soft 5.19 · magenta-on-dark on ink 5.8
 *   control border on paper 3.3 (≥ 3:1 for UI components, WCAG 1.4.11)
 *
 * Brand colours come from the official Tam Renk logo (ADR-003). Magenta is
 * used as a FILL (buttons, badges, colour bar, focus); magenta TEXT on light
 * surfaces uses --tr-color-magenta-text, because the logo magenta is only
 * 4.0:1 on surface-soft. The logo itself only sits on paper, surface-soft or
 * surface-sunken — never on a dark surface. In the dark theme (dark.css,
 * html[data-theme="dark"]) it sits on a paper chip: there is no white logo.
 *
 * Dark theme: assets/css/dark.css re-maps the semantic colour tokens below
 * under :root[data-theme="dark"]. The --tr-fixed-* values never change with
 * the theme: paper objects (hero proof sheet, logo chip) and text on light
 * fills use them. Overprint (mix-blend-mode) always goes through
 * --tr-overprint-blend: multiply on paper, screen on the dark theme.
 */

:root {
	/* ── Colour: brand ─────────────────────────────────────────────── */
	--tr-color-ink: #1b1c1f;             /* primary text, selected states */
	--tr-color-antrasit: #2a2c30;        /* dark surfaces, secondary buttons */
	--tr-color-ink-deep: #1e1f22;        /* footer */
	--tr-color-magenta: #e5007d;         /* logo magenta — the only accent: fills, focus */
	--tr-color-magenta-text: #c4006f;    /* magenta text on light surfaces */
	--tr-color-magenta-hover: #c4006f;
	--tr-color-magenta-active: #a8005f;
	--tr-color-magenta-on-dark: #ff5cb5; /* magenta text/links on dark surfaces */
	--tr-color-magenta-tint: #fbe6f1;    /* subtle backgrounds (e.g. info note) */
	--tr-color-logo-grey: #494951;       /* reference only — brand graphics, never UI text */

	/* ── Colour: process (CMYK) — decorative only, never for text ──── */
	--tr-color-cyan: #009ee3;            /* logo values */
	--tr-color-yellow: #ffed00;
	--tr-color-black: #1a1a18;

	/* ── Colour: neutrals ──────────────────────────────────────────── */
	--tr-color-paper: #ffffff;
	--tr-color-surface: #ffffff;
	--tr-color-surface-soft: #f1f1ef;    /* uncoated-stock grey, not cream */
	--tr-color-surface-sunken: #e8e8e5;  /* media wells */
	--tr-color-text: var(--tr-color-ink);
	--tr-color-text-muted: #5b5f66;
	--tr-color-text-on-dark: #ffffff;
	--tr-color-text-muted-on-dark: #b9bbbf;
	--tr-color-border: #dcdcd9;          /* decorative dividers only */
	--tr-color-border-strong: #7d8087;   /* form controls: 3.9 on paper, 3.5 on surface-soft */
	--tr-color-border-dark: rgb(255 255 255 / 0.14);

	/* ── Colour: feedback ──────────────────────────────────────────── */
	--tr-color-success: #1f7a4d;
	--tr-color-success-tint: #e6f3ec;
	--tr-color-warning: #8a5300;
	--tr-color-warning-tint: #fdf3e1;
	--tr-color-danger: #b42318;
	--tr-color-danger-tint: #fdecea;
	--tr-color-focus: var(--tr-color-magenta);

	/* ── Colour: fixed (theme-invariant, see header) ───────────────── */
	--tr-fixed-ink: #1b1c1f;
	--tr-fixed-paper: #ffffff;
	--tr-fixed-surface-soft: #f1f1ef;
	--tr-fixed-text-muted: #5b5f66;
	--tr-fixed-border: #dcdcd9;
	--tr-fixed-border-strong: #7d8087;
	--tr-fixed-magenta-text: #c4006f;

	/* ── Overprint: ink on paper multiplies; light on the dark theme adds */
	--tr-overprint-blend: multiply;

	/* ── Typography ────────────────────────────────────────────────── */
	--tr-font-sans: "Archivo", "Archivo Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Width axis (Archivo wdth 62–125) */
	--tr-font-width-display: 64%;        /* display, h1: poster cut */
	--tr-font-width-condensed: 70%;      /* h2, big numerals */
	--tr-font-width-semi: 80%;           /* h3–h4, card titles */
	--tr-font-width-normal: 100%;        /* body, UI */
	--tr-font-width-wide: 118%;          /* small labels (instead of ALL CAPS) */

	/* Scale (mobile → desktop via clamp) */
	--tr-text-display: clamp(3.25rem, 1.2rem + 7.6vw, 8rem);    /* 52 → 128 */
	--tr-text-h1: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);        /* 40 → 72 */
	--tr-text-h2: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);         /* 32 → 60 */
	--tr-text-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);     /* 22 → 28 */
	--tr-text-h4: 1.125rem;                                     /* 18 */
	--tr-text-body: 1rem;                                       /* 16 (17 on ≥ 1024) */
	--tr-text-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);   /* 17 → 20 */
	--tr-text-small: 0.9375rem;                                 /* 15 */
	--tr-text-caption: 0.8125rem;                               /* 13 — metadata only */
	--tr-text-button: 0.9375rem;                                /* 15 */
	--tr-text-nav: 0.9375rem;                                   /* 15 */

	--tr-weight-regular: 400;
	--tr-weight-medium: 500;
	--tr-weight-semibold: 600;
	--tr-weight-bold: 700;
	--tr-weight-heavy: 800;
	--tr-weight-poster: 850;             /* display, h1 */
	--tr-weight-black: 900;

	--tr-leading-tight: 0.9;             /* display */
	--tr-leading-heading: 1.15;
	--tr-leading-body: 1.6;
	--tr-tracking-display: -0.03em;
	--tr-tracking-heading: -0.02em;
	--tr-measure: 68ch;

	/* ── Space: 8px base (4 allowed for hairline adjustments) ──────── */
	--tr-space-1: 0.25rem;  /*  4 */
	--tr-space-2: 0.5rem;   /*  8 */
	--tr-space-3: 0.75rem;  /* 12 */
	--tr-space-4: 1rem;     /* 16 */
	--tr-space-5: 1.5rem;   /* 24 */
	--tr-space-6: 2rem;     /* 32 */
	--tr-space-7: 3rem;     /* 48 */
	--tr-space-8: 4rem;     /* 64 */
	--tr-space-9: 6rem;     /* 96 */
	--tr-section-y: clamp(3.5rem, 2rem + 5vw, 8rem);

	/* ── Radius: controls 4, containers 8, paper objects 0 ─────────── */
	--tr-radius-none: 0;     /* paper: proof sheet, product mockups */
	--tr-radius-sm: 4px;     /* buttons, inputs, chips */
	--tr-radius-md: 8px;     /* cards, media wells, panels, dialogs */
	--tr-radius-pill: 999px; /* counters only */

	/* ── Elevation: minimal ────────────────────────────────────────── */
	--tr-shadow-1: 0 1px 2px rgb(27 28 31 / 0.06);
	--tr-shadow-2: 0 8px 24px -12px rgb(27 28 31 / 0.22);
	--tr-shadow-sheet: 0 1px 0 rgb(27 28 31 / 0.04), 0 28px 56px -32px rgb(27 28 31 / 0.35);
	--tr-shadow-overlay: 0 24px 64px -16px rgb(27 28 31 / 0.4);

	/* ── Motion ────────────────────────────────────────────────────── */
	--tr-ease: cubic-bezier(0.2, 0, 0, 1);
	--tr-duration-fast: 150ms;
	--tr-duration-base: 220ms;
	--tr-transition-fast: var(--tr-duration-fast) var(--tr-ease);

	/* ── Layering ──────────────────────────────────────────────────── */
	--tr-z-base: 1;
	--tr-z-sticky: 20;       /* sticky mobile CTA */
	--tr-z-header: 30;
	--tr-z-overlay: 40;      /* drawer / modal backdrop */
	--tr-z-dialog: 50;

	/* ── Layout ────────────────────────────────────────────────────── */
	--tr-container-max: 1280px;
	--tr-container-narrow: 760px;
	--tr-content-size: var(--tr-container-narrow); /* WP content column (theme.json contentSize) */
	--tr-wide-size: var(--tr-container-max);       /* alignwide (theme.json wideSize) */
	--tr-gutter: 16px;
	--tr-tap-target: 44px;
	--tr-control-height: 48px;
	--tr-header-height: 64px;
	--tr-logo-h: 52px;              /* stacked logo height: 52 / 56 / 60 (wordmark caps ≥ 11px) */
	--tr-logo-h-footer: 72px;

	/* ── Component tokens ──────────────────────────────────────────── */
	--tr-sticky-bar-height: 4.5rem;
	--tr-crop-gap: 8px;
	--tr-crop-length: 14px;

	/* ── Phase 1 aliases (kept for plugin templates / older CSS) ───── */
	--tr-color-brand-primary: var(--tr-color-antrasit);
	--tr-color-brand-secondary: var(--tr-color-magenta);
	--tr-color-muted: var(--tr-color-text-muted);
	--tr-color-background: var(--tr-color-paper);
	--tr-space-xs: var(--tr-space-1);
	--tr-space-sm: var(--tr-space-2);
	--tr-space-md: var(--tr-space-4);
	--tr-space-lg: var(--tr-space-5);
	--tr-space-xl: var(--tr-space-7);
	--tr-space-2xl: var(--tr-space-8);
	--tr-radius-lg: var(--tr-radius-md);
	--tr-font-size-sm: var(--tr-text-small);
	--tr-font-size-md: var(--tr-text-body);
	--tr-line-height-body: var(--tr-leading-body);
	--tr-line-height-heading: var(--tr-leading-heading);
}

@media (min-width: 768px) {
	:root {
		--tr-gutter: 24px;
		--tr-header-height: 72px;
		--tr-logo-h: 56px;
	}
}

@media (min-width: 1024px) {
	:root {
		--tr-gutter: 32px;
		--tr-text-body: 1.0625rem; /* 17 */
		--tr-logo-h: 60px;
	}
}