/* Direction A — tokens. Scoped to body.direction-a; the shared header and
   footer read these same variables, so the direction restyles the chrome
   without touching its markup. */

@font-face {
	font-family: "Hobo Std";
	src: url("../../fonts/HoboStd.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Century Gothic Pro";
	src: url("../../fonts/century-gothic-pro-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Century Gothic Pro";
	src: url("../../fonts/century-gothic-pro-bold.otf") format("opentype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

body.direction-a {
	/* Color, background first */
	/* Page ground: flat, no noise; --acs-white stays pure for cards */
	--acs-bg: #eff2f1;
	/* The client's exported edges (media/masks) are this flat colour */
	--acs-ground: var(--acs-bg);
	--acs-ink: #1a1a1a;
	--acs-ink-soft: #6f6b67;
	--acs-red: #dd2d21;                 /* Crabbin' Red, PANTONE 485 C (brand palette) */
	--acs-red-deep: #a62418;
	--acs-yellow: #f8d60a;              /* Shack Yellow, PANTONE 7405 C (brand palette) */
	--acs-line: #e4e0dc;
	--acs-hover: #f1efec;
	--acs-chip-bg: rgba(0, 0, 0, 0.05);
	--acs-chip-line: rgba(0, 0, 0, 0.08);
	--acs-chip-scrolled: #e2e4e3;       /* desktop location chip once scrolled */
	--acs-cream: #fdf9e6;               /* mobile menu panel */
	--acs-ctrl-bg: rgba(0, 0, 0, 0.1);   /* carousel arrow fill */
	--acs-ctrl-line: rgba(0, 0, 0, 0.25); /* carousel arrow ring, idle dots */
	--acs-ctrl-active: #333333;         /* active carousel dot */
	--acs-yellow-line: #faeebc;         /* mobile menu dividers */
	--acs-white: #ffffff;
	--acs-overlay: rgba(24, 18, 14, 0.45);
	--acs-placeholder: #3d3d3d;
	--acs-placeholder-deep: #242424;
	/* Restaurant wall paint (Home Depot swatches, brand palette); sampled
	   from the palette sheet, for reference and in-store art */
	--acs-paint-flirt-alert: #d33c2d;   /* Flirt Alert P150-7D */
	--acs-paint-beacon-blue: #45599a;   /* Beacon Blue P510-7D */
	--acs-paint-lamplit: #fee45f;       /* Lamplit MQ4-11 */
	--acs-paint-deep-fire: #e26d43;     /* Deep Fire M180-7D */

	/* Type */
	--acs-font-display: "Hobo Std", "Comic Sans MS", cursive;
	--acs-font-body: "Century Gothic Pro", "Avenir Next", "Trebuchet MS", sans-serif;

	/* Chrome */
	--acs-header-h: 3.5rem;
	--acs-gutter: clamp(1.25rem, 4vw, 2.5rem);
	--acs-section-gap: 3.75rem;         /* 60px between sections below 1024 */
	--acs-sticky-h: 1.875rem;           /* what stays pinned: the location bar */
	--acs-tear-h: clamp(1.25rem, 3.2vw, 3rem); /* the torn edge under it */
	--acs-pin-h: calc(var(--acs-sticky-h) + var(--acs-tear-h)); /* where anything else may pin */
	--acs-logo-row: 5rem;               /* mobile logo row; the logo sits inside it */
	--acs-nav-clear: 7.5rem;            /* fixed bottom nav plus its raised CTA */
	--acs-nav-h: 4.3125rem;             /* the bottom nav bar alone (69px) */
	--acs-radius: 0.5rem;
	--acs-radius-chip: 0.625rem;
}

@media (min-width: 1024px) {
	body.direction-a {
		--acs-header-h: 4.5rem;
		--acs-section-gap: 7.5rem;      /* 120px on desktop */
		--acs-sticky-h: var(--acs-header-h);
		--acs-nav-clear: 0rem;
		--acs-nav-h: 0rem;
	}
}