/**
 * Village QR design tokens and global typography.
 *
 * Edit this file to update the visual identity across the public site.
 * Component and layout rules belong in style.css and should only consume
 * the variables declared here.
 * After publishing changes, increment Version in ../../style.css.
 */

:root {
	/* Typography */
	--village-font-heading: "Playfair Display", Georgia, serif;
	--village-font-display: "Bebas Neue", "Arial Narrow", sans-serif;
	--village-font-body: "Roboto", Arial, sans-serif;

	/* Brand */
	--village-color-brand: #124D44;
	--village-color-brand-action: #752124;
	--village-color-brand-dark: #0F4139;
	--village-color-brand-deep: #092924;
	--village-color-brand-ink: #092924;
	--village-color-accent: #c7a27d;
	--village-color-accent-soft: #cbb69d;
	--village-color-accent-muted: #c9b59d;

	/* Surfaces */
	--village-color-site-background: #0C342E;
	/* --village-color-site-background: green; */
	--village-color-surface: #ffffff;
	--village-color-paper: #fffdfa;
	--village-color-surface-soft: #f5f5f5;
	--village-color-surface-muted: #e0e0e0;
	--village-color-surface-gray: #dddddd;
	--village-color-placeholder: #dcdcdc;

	/* Text */
	--village-color-text-strong: #050505;
	--village-color-text-primary: #1b1c20;
	--village-color-text-body: #334856;
	--village-color-text-dialog: #262c30;
	--village-color-text-service: #183a5a;
	--village-color-text-neutral: #1f252a;
	--village-color-text-muted: #7d8184;
	--village-color-text-subtle: #73777a;
	--village-color-text-soft: #a28b89;
	--village-color-text-warm: #987a75;
	--village-color-text-menu-ink: #261d1b;
	--village-color-text-placeholder: #9d8975;
	--village-color-text-modal-title: #252525;
	--village-color-text-reviews: #181313;

	/* Borders and states */
	--village-color-border: #d9dde0;
	--village-color-border-warm: #dac4c4;
	--village-color-border-soft: #e4e4e4;
	--village-color-divider: #cccccc;
	--village-color-overlay: rgba(0, 0, 0, 0.5);
	--village-color-overlay-soft: rgba(0, 0, 0, 0.4);
	--village-color-overlay-image: rgba(0, 0, 0, 0.42);
	--village-color-overlay-medium: rgba(0, 0, 0, 0.56);
	--village-color-overlay-strong: rgba(0, 0, 0, 0.72);
	--village-color-overlay-modal: rgba(17, 3, 3, 0.79);
	--village-color-white-10: rgba(255, 255, 255, 0.1);
	--village-color-white-20: rgba(255, 255, 255, 0.2);
	--village-color-white-25: rgba(255, 255, 255, 0.25);
	--village-color-white-40: rgba(255, 255, 255, 0.4);
	--village-color-white-70: rgba(255, 255, 255, 0.7);

	/* Menu-specific neutrals */
	--village-color-menu-tab-text: #092924;
	--village-color-menu-border: #898989;
	--village-color-menu-title: #333333;
	--village-color-menu-copy: #565656;
	--village-color-menu-muted: #909090;
	--village-color-menu-muted-light: #929292;
	--village-color-menu-accent-text: #dfcbbb;
	--village-color-tripadvisor: #00aa6c;
	--village-color-tripadvisor-bright: #00e884;
	--village-color-footer-brand: #AC9B86;

	/* Decorative gradients */
	--village-gradient-placeholder-warm: linear-gradient(145deg, #d9c9b7, #b6997a);
	--village-gradient-placeholder-light: linear-gradient(145deg, #ece5dc, #d4c5b4);
	--village-gradient-placeholder-modal: linear-gradient(145deg, #e9dfd4, #cdb9a4);
	--village-gradient-restaurant-overlay: linear-gradient(0deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.05));

	/* Shadows */
	--village-shadow-panel: 8px 0 24px rgba(0, 0, 0, 0.18);
	--village-shadow-dialog: 0 20px 70px rgba(0, 0, 0, 0.45);
	--village-shadow-dialog-soft: 0 20px 70px rgba(0, 0, 0, 0.4);
	--village-shadow-card: 0 12px 25px rgba(0, 0, 0, 0.1);
	--village-shadow-card-hover: 0 16px 30px rgba(0, 0, 0, 0.18);
	--village-shadow-menu-card: 0 10px 28px rgba(27, 4, 3, 0.22);
	--village-shadow-modal: 0 22px 65px rgba(0, 0, 0, 0.38);
	--village-shadow-restaurant: 0 10px 10px rgba(0, 0, 0, 0.16);
	--village-shadow-text: 0 3px 6px rgba(0, 0, 0, 0.26);
}

body,
button,
input,
select,
textarea {
	font-family: var(--village-font-body);
}

h1,
h2,
.wp-block-heading:is(h1, h2) {
	font-family: var(--village-font-heading) !important;
}

h3,
h4,
.wp-block-heading:is(h3, h4) {
	font-family: var(--village-font-display) !important;
}