/*
 * Design tokens.
 *
 * The single source of visual truth, deliberately a plain custom-property file and
 * NOT Lumo overrides inside a Vaadin theme. Three things load it:
 *
 *   - the Vaadin app          (@StyleSheet on ComeAlongApplication)
 *   - the Thymeleaf marketing pages   (templates/marketing/layout.html)
 *   - a future static marketing site, if one ever takes the namespace over
 *
 * That is the whole point. Two visual systems drifting apart is the real failure
 * mode of splitting the marketing site off later - not routing. Keep this file free
 * of component styles and free of anything Vaadin-specific; it is values only.
 *
 * Lumo's own variables are mapped from these at the bottom, so themed Vaadin
 * components pick the palette up without any component needing to know about it.
 */

:root {
	/* ---- Colour ------------------------------------------------------------
	 * Placeholder palette. The visual direction in docs/UX_DESIGN.md has not been
	 * turned into a real palette yet; these are neutral values chosen so nothing
	 * looks accidentally styled while the skeleton is standing. Replace wholesale.
	 */
	--ta-color-bg:              #ffffff;
	--ta-color-surface:         #f6f6f4;
	--ta-color-border:          #e2e2dd;

	--ta-color-text:            #1c1c1a;
	--ta-color-text-secondary:  #5d5d57;

	--ta-color-primary:         #2f6d4f;
	--ta-color-primary-text:    #ffffff;
	--ta-color-primary-hover:   #275c43;

	/* Reserved for the seat strip and sign-up states (phase 3). */
	--ta-color-full:            #9a3b2f;
	--ta-color-waiting:         #9a6b1f;

	/* ---- Typography -------------------------------------------------------
	 * System stack on purpose: no third-party fonts, no Google Fonts, nothing
	 * loaded from another origin on any page. See docs/GDPR.md §5 - self-hosting
	 * everything is what keeps the app free of a consent banner.
	 */
	--ta-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--ta-font-size-s:   0.875rem;
	--ta-font-size-m:   1rem;
	--ta-font-size-l:   1.25rem;
	--ta-font-size-xl:  1.75rem;
	--ta-font-size-xxl: 2.5rem;

	--ta-line-height-tight: 1.25;
	--ta-line-height-body:  1.6;

	/* ---- Space ------------------------------------------------------------- */
	--ta-space-xs: 0.25rem;
	--ta-space-s:  0.5rem;
	--ta-space-m:  1rem;
	--ta-space-l:  2rem;
	--ta-space-xl: 4rem;

	/* ---- Shape ------------------------------------------------------------- */
	--ta-radius-s: 4px;
	--ta-radius-m: 8px;
	--ta-radius-l: 16px;

	/* ---- Layout ------------------------------------------------------------ */
	--ta-content-max-width: 40rem;

	/* ---- Lumo mapping ------------------------------------------------------
	 * Vaadin components read Lumo variables. Mapping them here means a component
	 * never refers to a --ta- token directly, and the marketing pages never have to
	 * know Lumo exists.
	 */
	--lumo-font-family:     var(--ta-font-family);
	--lumo-base-color:      var(--ta-color-bg);
	--lumo-contrast-5pct:   var(--ta-color-surface);
	--lumo-body-text-color: var(--ta-color-text);
	--lumo-secondary-text-color: var(--ta-color-text-secondary);
	--lumo-primary-color:   var(--ta-color-primary);
	--lumo-primary-text-color: var(--ta-color-primary);
	--lumo-primary-contrast-color: var(--ta-color-primary-text);
	--lumo-border-radius-s: var(--ta-radius-s);
	--lumo-border-radius-m: var(--ta-radius-m);
	--lumo-border-radius-l: var(--ta-radius-l);
}