/**
 * Design tokens.
 *
 * Single source of truth for colour, spacing, type, radii and motion.
 * Taken from the Bajo Cielo PWA (bajocielo-movil/styles.css) and recorded in
 * docs/inventory.md section 6. Defined once here; nothing else declares a raw
 * colour or a raw pixel spacing value.
 *
 * @package BajoCielo
 */

:root {
	/* Ink */
	--bc-ink: #222222;
	--bc-ink-soft: #484848;
	--bc-ink-mute: #717171;

	/* Paper */
	--bc-paper: #ffffff;
	--bc-paper-soft: #f7f7f7;
	--bc-paper-rule: #dddddd;
	--bc-paper-rule-2: #ebebeb;

	/* Sky */
	--bc-sky-deep: #046f8d;
	--bc-sky-deep-ink: #03556d;
	--bc-sky: #4ca1c6;
	--bc-sky-light: #6dcacc;
	--bc-sky-wash: rgba( 4, 111, 141, 0.06 );

	/* State */
	--bc-danger: #c13515;

	/* Spacing */
	--bc-space-1: 4px;
	--bc-space-2: 8px;
	--bc-space-3: 12px;
	--bc-space-4: 16px;
	--bc-space-5: 24px;
	--bc-space-6: 32px;
	--bc-space-7: 48px;
	--bc-space-8: 64px;
	--bc-space-9: 96px;

	/* Type scale */
	--bc-text-xs: 12px;
	--bc-text-sm: 14px;
	--bc-text-base: 16px;
	--bc-text-md: 18px;
	--bc-text-lg: 22px;
	--bc-text-xl: 26px;
	--bc-text-2xl: 32px;
	--bc-text-3xl: 44px;

	/* Families */
	--bc-font-display: "Fraunces", Georgia, "Times New Roman", serif;
	/* The handwritten accents in the homepage reference. */
	--bc-font-script: "Caveat", "Segoe Script", cursive;
	--bc-font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* Weights and line heights */
	--bc-weight-regular: 400;
	--bc-weight-medium: 500;
	--bc-weight-semibold: 600;
	--bc-leading-tight: 1.15;
	--bc-leading-snug: 1.35;
	--bc-leading-normal: 1.6;

	/* Radii */
	--bc-radius-1: 8px;
	--bc-radius-2: 12px;
	--bc-radius-3: 16px;
	--bc-radius-4: 24px;
	--bc-radius-pill: 999px;

	/* Motion */
	--bc-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
	--bc-duration-fast: 150ms;
	--bc-duration: 320ms;
	--bc-duration-slow: 620ms;

	/* Shell */
	--bc-max-width: 1400px;
	--bc-gutter: 24px;
	--bc-nav-height: 80px;

	/* Elevation */
	--bc-shadow-1: 0 1px 2px rgba( 34, 34, 34, 0.06 ), 0 1px 3px rgba( 34, 34, 34, 0.08 );
	--bc-shadow-2: 0 6px 16px rgba( 34, 34, 34, 0.12 );

	/* Layering */
	--bc-z-header: 100;
	--bc-z-overlay: 200;
	/* Above the header, below a modal overlay. */
	--bc-z-chat: 150;

	/* A deep WhatsApp teal: 5.6:1 against white, so small text on it and in it reads. */
	--bc-whatsapp: #0f7569;
}

@media ( max-width: 767px ) {

	:root {
		--bc-nav-height: 64px;
		--bc-gutter: 16px;
	}
}