/* ============================================================
 * 01-tokens.css — Design Tokens Bridge Layer
 *
 * MIGRATION STATUS (2026-05-23):
 *   ✅ Loaded by functions.php on every page
 *   ✅ Bridges v3.18 short variable names (--brand, --ink, --fh)
 *      to new theme.json presets (--wp--preset--color--trea-brand)
 *   ⏳ Existing v3.18 CSS stále žije v Customizer Doplnkové CSS —
 *      tieto premenné fungujú PARALELNE počas migrácie.
 *
 * Cieľ tohto súboru:
 * (a) Definovať CSS variables ktoré v theme.json nie sú vhodné
 *     (napr. footer-specific colors, --fh aliasy)
 * (b) Vytvoriť BRIDGE od starých skratiek z v3.18 na nové theme.json
 *     premenné. Vďaka tomu sa existujúci CSS dá kopírovať do
 *     06-homepage.css, 07-pages.css, 08-articles.css BEZ refactoringu
 *     každej --brand referencie.
 *
 * Verzia: 1.0.0 (2026-05-23)
 * ============================================================ */

:root {
	/* ── BRAND COLORS — bridge z v3.18 ── */
	--brand:       var(--wp--preset--color--trea-brand);
	--brand-600:   var(--wp--preset--color--trea-brand-600);
	--brand-700:   var(--wp--preset--color--trea-brand-700);
	--brand-100:   var(--wp--preset--color--trea-brand-100);
	--brand-50:    var(--wp--preset--color--trea-brand-50);

	/* ── TEXT COLORS — bridge ── */
	--ink:         var(--wp--preset--color--trea-ink);
	--text:        var(--wp--preset--color--trea-text);
	--muted:       var(--wp--preset--color--trea-muted);
	--subtle:      var(--wp--preset--color--trea-subtle);

	/* ── SURFACES — bridge ── */
	--bg:          var(--wp--preset--color--trea-bg);
	--bg-2:        var(--wp--preset--color--trea-bg-alt);
	--line:        var(--wp--preset--color--trea-line);
	--line-2:      var(--wp--preset--color--trea-line-2);

	/* ── ACCENT — bridge ── */
	--teal:        var(--wp--preset--color--trea-teal);
	--warm-touch:  var(--wp--preset--color--trea-warm);

	/* ── FOOTER (footer-only colors, nepatria do globálnej palety) ── */
	--footer-bg:        #1e1e4a;
	--footer-text:      #c9cce4;
	--footer-muted:     #9999bb;
	--footer-divider:   #2e2e6a;
	--footer-divider-2: #5a5a8a;
	--footer-copy:      #e8e9f5;

	/* ── HEADER ── */
	--header-line: #e0e0e0;

	/* ── WARN callout ── */
	--warn:        var(--wp--preset--color--trea-warn);
	--warn-bg:     var(--wp--preset--color--trea-warn-bg);
	--warn-text:   var(--wp--preset--color--trea-warn-text);
	--warn-border: var(--wp--preset--color--trea-warn-border);

	/* ── SUCCESS callout ── */
	--ok:          var(--wp--preset--color--trea-ok);
	--ok-soft:     var(--wp--preset--color--trea-ok-soft);

	/* ── TYPOGRAPHY — bridge ── */
	--fh: var(--wp--preset--font-family--trea-sans);
	--fb: var(--wp--preset--font-family--trea-sans);
	--fs: var(--wp--preset--font-family--trea-serif);
	--fm: var(--wp--preset--font-family--trea-mono);

	/* ── RADII — bridge ── */
	--rs: var(--wp--custom--radius--sm);
	--rm: var(--wp--custom--radius--md);
	--rl: var(--wp--custom--radius--lg);
	--rp: var(--wp--custom--radius--pill);

	/* ── EASING ── */
	--e: var(--wp--custom--easing);

	/* ── SHADOWS ── */
	--shadow-card:     var(--wp--custom--shadow--card);
	--shadow-hover:    var(--wp--custom--shadow--hover);
	--shadow-lift:     var(--wp--custom--shadow--lift);
	--shadow-floating: var(--wp--custom--shadow--floating);

	/* ── TRANSITIONS ── */
	--t-fast:   var(--wp--custom--transition--fast);
	--t-normal: var(--wp--custom--transition--normal);
	--t-slow:   var(--wp--custom--transition--slow);

	/* ── CONTAINER WIDTHS ── */
	--c-narrow: var(--wp--custom--container--narrow);
	--c-normal: var(--wp--custom--container--normal);
	--c-wide:   var(--wp--custom--container--wide);

	/* ── SPACING SCALE ── */
	--sp-1: var(--wp--preset--spacing--1);
	--sp-2: var(--wp--preset--spacing--2);
	--sp-3: var(--wp--preset--spacing--3);
	--sp-4: var(--wp--preset--spacing--4);
	--sp-5: var(--wp--preset--spacing--5);
	--sp-6: var(--wp--preset--spacing--6);
	--sp-7: var(--wp--preset--spacing--7);
}