/*-----------------------------------------------------------------------------------

	Klient:			Michal Doležal, truhlář
	Tier:			T1 Prezentační web
	Postavil:		Riverlab (riverlab.cz)
	Verze:			0.2 (koncept)
	Dodáno:			Listopad 2026

-----------------------------------------------------------------------------------*/

/*
	Tokeny. Klient nemá logo ani barvy. Paleta podle barevného kruhu emocí:
	olivová leží v poli „komfort“ (klid, příroda, dřevo), tmavý ořech nese
	„spolehlivost“ a řemeslo, krémová je světlé hoblované dřevo. Žádná křiklavá
	barva: truhlář prodává klid a důvěru, ne vzrušení.
	Pravidlo 60 / 30 / 10: krémová plochy, olivová a ořech sekce, tmavá olivová značka a akce.
	Fotky se generují do stejné palety (olivové pozadí, teplé dřevo, krémové světlo).
	Kontrast ověřen výpočtem:
	--c-ink na --c-olive 4,8 : 1, krémová na olivové 3,17 : 1 (jen velký text),
	--c-ink na --c-cream 12,6 : 1, krémová na --c-walnut 13 : 1.
*/

:root {
	/* ---- 1) Primitiva: jen hodnoty, v CSS se nepoužívají přímo ---- */
	--c-ink: #22170F;           /* text, tmavé ořechové dřevo */
	--c-ink-soft: #6B5A4C;      /* tlumený text na krémové, 5,4 : 1 */
	--c-cream: #EEE7DC;         /* pozadí obsahu */
	--c-cream-light: #F4EFE6;   /* karty, velký nápis */
	--c-olive: #656F56;         /* hero, kontakt a horní lišta; krémový text na ní má 4,6 : 1 */
	--c-olive-light: #869373;   /* světlejší olivová pro text na tmavé, 4,7 : 1 na ořechové */
	--c-olive-deep: #454E36;    /* značka, odkazy, tlačítka; tmavší odstín --c-olive, krémová 7,6 : 1 */
	--c-walnut: #2B231E;        /* tmavá sekce a patička */
	--c-walnut-soft: #B9AFA2;   /* tlumený text na tmavé, 7,1 : 1 */
	--c-line: #D6CCBE;
	--c-error: #9B2C1F;
	--c-placeholder: #F3D9A4;  /* podklad zástupných textů v konceptu */

	/* ---- 2) Role: v CSS se používají jen tyhle. Jméno říká, k čemu barva slouží ---- */
	/* Plochy */
	--color-bg: var(--c-cream);                 /* pozadí stránky */
	--color-surface: var(--c-cream-light);      /* karty, panely, pilulky na olivové */
	--color-field: var(--c-cream);              /* pole formuláře */
	--color-hero-bg: var(--c-olive);            /* hero, kontakt, horní lišta */
	--color-surface-dark: var(--c-walnut);      /* tmavé sekce a patička */
	--color-inverse: var(--c-ink);              /* nejtmavší plocha: mořidlo tlačítka, „zpět nahoru“ */
	--color-placeholder: var(--c-placeholder);
	/* Text */
	--color-text: var(--c-ink);
	--color-text-muted: var(--c-ink-soft);
	--color-text-inverse: var(--c-cream-light); /* na olivové, tmavé a značkové ploše */
	--color-text-muted-inverse: var(--c-walnut-soft); /* na tmavé ploše */
	--color-accent-on-dark: var(--c-olive-light);     /* odkaz při najetí na tmavé ploše */
	--color-link: var(--c-olive-deep);
	--color-link-hover: var(--c-ink);
	/* Akce */
	--color-action: var(--c-olive-deep);
	--color-action-text: var(--color-text-inverse);
	/* Čáry a stavy */
	--color-line: var(--c-line);
	--color-line-strong: var(--c-ink-soft);     /* okraj polí formuláře */
	--color-line-inverse: color-mix(in srgb, var(--c-walnut-soft) 22%, transparent);  /* dělicí čára na tmavé */
	--color-error: var(--c-error);
	--color-focus: var(--c-ink);
	/* Průsvitné vrstvy */
	--color-scrim-strong: color-mix(in srgb, var(--c-ink) 90%, transparent);  /* tmavý přechod pod popiskem na fotce, dole */
	--color-scrim-mid: color-mix(in srgb, var(--c-ink) 60%, transparent);
	--gradient-popisek: linear-gradient(to top, var(--color-scrim-strong) 0%, var(--color-scrim-mid) 50%, transparent 100%);
	--color-tint-weak: color-mix(in srgb, var(--c-olive) 30%, transparent);
	--color-tint-strong: color-mix(in srgb, var(--c-olive) 55%, transparent);
	--color-shadow: color-mix(in srgb, var(--c-walnut) 30%, transparent);

	/* ---- Písmo: self-host woff2, latin + latin-ext ---- */
	--font-heading: "Unbounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--step--1: 0.9375rem;
	--step-0: 1.0625rem;
	--step-1: 1.25rem;
	--step-2: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
	--step-3: clamp(1.625rem, 1.15rem + 2.2vw, 2.625rem);
	--step-4: clamp(2rem, 1.2rem + 3.6vw, 3.5rem);
	--lh-body: 1.6;
	--lh-heading: 1.15;
	--measure: 62ch;

	/* ---- Mezery (základ 4 px) ---- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: clamp(3.5rem, 2.5rem + 4vw, 6rem);
	--section-space: clamp(4rem, 3rem + 5vw, 7rem);

	/* ---- Rozvržení ---- */
	--content-max: 72rem;
	--gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);
	--header-h: 4.5rem;
	--tap-min: 2.75rem;

	/* ---- Tvary: měkké, zaoblené jako hrana broušeného dřeva ---- */
	--radius-pill: 999px;
	--radius-control: 0.875rem;
	--radius-card: 1.75rem;
	--radius-photo: 2rem;

	/* ---- Vrstvy ---- */
	--z-header: 10;

	/* ---- Pohyb ---- */
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 700ms;
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur-sweep: 450ms;
	--ease-sweep: cubic-bezier(0.65, 0, 0.35, 1);  /* mořidlo přes tlačítko */
}