/**
 * Semantic tokens — Orthofocus Design System v1
 *
 * 1. Τιμές του Design System που δεν υπάρχουν στο design-tokens.css
 *    (line-heights, container padding, ύψη controls, focus, αναλογίες εικόνων, icons).
 * 2. «Ρόλοι» που δείχνουν στα βασικά tokens (π.χ. --color-heading → --color-primary).
 *
 * Κανόνας: τα components χρησιμοποιούν ΜΟΝΟ var(--…), ποτέ σκέτες τιμές.
 * Breakpoints (§5): mobile 0–767 · tablet 768–1023 · desktop 1024+ · wide 1440+
 * Mobile-first: οι βασικές τιμές είναι για κινητό και αλλάζουν με min-width.
 */

:root {
	/* Typography (§3) */
	--lh-heading-tight: 1.1;
	--lh-heading: 1.2;
	--lh-body: 1.6;
	--lh-button: 1;
	--tracking-caps: 0.04em;

	/* Ρόλοι χρωμάτων (§1) */
	--color-heading: var(--color-primary);
	--color-link: var(--color-primary);
	--color-link-hover: var(--color-primary-dark);
	--color-icon: var(--color-primary);
	--color-on-primary: var(--color-surface);
	--color-on-accent: var(--color-surface);
	--color-price: var(--color-accent);
	--color-accent-text: #C25200; /* σκούρο πορτοκαλί για μικρό κείμενο σε λευκό (4.6:1)· το #FF7E0C σε λευκό είναι μόνο 2.6:1 */

	/* Φόντο σελίδας (canvas) = σκούρο μωβ: κείμενα και γραμμές που κάθονται ΑΠΕΥΘΕΙΑΣ πάνω του.
	   Οι λευκές κάρτες/πάνελ κρατούν τα κανονικά χρώματα κειμένου. Εφαρμογή: base/canvas.css */
	--color-canvas: var(--color-background);
	--color-on-canvas: var(--color-surface);
	--color-on-canvas-muted: #D2C4D6; /* 10:1 σε #300137 */
	--color-canvas-line: color-mix(in srgb, var(--color-surface) 14%, transparent);
	--color-canvas-raised: color-mix(in srgb, var(--color-surface) 7%, transparent);
	--color-canvas-panel: color-mix(in srgb, var(--color-primary) 55%, var(--color-background));

	/* Layout (§6, §7) — τιμές κινητού */
	--container-padding: 20px;
	--section-space: var(--section-space-mobile);
	--grid-gap: var(--space-4);

	/* Controls (§9, §14, §15) */
	--border-width: 1px;
	--btn-height: 46px;
	--btn-height-cta: 50px;
	--btn-padding-x: var(--space-5);
	--control-height: 48px;
	--control-padding-x: var(--space-4);
	--tap-target: 44px;
	--focus-color: var(--color-primary);
	--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 25%, transparent);
	--focus-outline: 2px solid var(--focus-color);
	--focus-offset: 2px;

	/* Εικόνες (§12) */
	--ratio-product: 1 / 1;
	--ratio-category: 4 / 3;
	--ratio-hero: 16 / 7;
	--ratio-blog: 16 / 9;

	/* Icons (§13) — viewBox 24 */
	--icon-stroke: 1.75;
	--icon-xs: 16px;
	--icon-sm: 20px;
	--icon-md: 24px;
	--icon-lg: 32px;

	/* Motion (§16) */
	--lift: -2px;

	/* Επίπεδα (z-index) */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-overlay: 900;
	--z-modal: 1000;
}

/* Tablet 768+ */
@media (min-width: 768px) {
	:root {
		--container-padding: 24px;
		--section-space: var(--section-space-tablet);
		--grid-gap: var(--space-5);
	}
}

/* Desktop 1024+ */
@media (min-width: 1024px) {
	:root {
		--container-padding: 32px;
		--section-space: var(--section-space-desktop);
		--grid-gap: var(--space-6);
		--btn-height-cta: var(--btn-height); /* το μεγαλύτερο CTA χρειάζεται μόνο σε αφή */
	}
}

/* Λιγότερη κίνηση όταν το ζητά ο χρήστης (§15, §16) */
@media (prefers-reduced-motion: reduce) {
	:root {
		--transition-fast: 0ms linear;
		--transition-default: 0ms linear;
		--transition-slow: 0ms linear;
		--lift: 0px;
	}
}