/**
 * Barranco Comptoir Péruvien — brand design tokens.
 *
 * Source: Brand Book V6 (Sept 2026) + the official Kit de Marque V6 asset
 * export's own BC_Tokens.css (docs/brand-assets/), which is what's used
 * for --bcc-ink below -- V4 had no confirmed ink value, so this file
 * aliased it to Pacífico as a placeholder. V6's asset kit ships a
 * distinct, real ink value (#1B1726) that was never Pacífico; corrected.
 * Everything else (5-color palette, 3 type families) matched exactly
 * between V4 and V6 -- no other change needed.
 *
 * The legacy names (--bcc-purple-900, --bcc-gold-400, --bcc-cream,
 * --bcc-ink, --bcc-lime, etc.) below are kept from the original
 * placeholder token set on purpose —
 * PRs 5, 7, 8, 9, 11, 12 already reference them in shipped CSS. Renaming
 * would silently break every one of those (undefined custom properties
 * fail silent in CSS, not a build error). They now alias the confirmed
 * brand-book colors instead of guesses.
 *
 * Fonts are self-hosted below (assets/fonts/*.woff2, fetched from Google
 * Fonts — same open-license files, just served from our own domain).
 * The brand book's true display face is "Brothers", not yet licensed;
 * it names "Big Shoulders Display" as the explicit interim substitute
 * (page 20: "* Big Shoulders Display en attendant la licence Brothers.
 * Le wordmark n'est jamais retapé." — the logo artwork itself is never
 * reset in a font, only surrounding headline/UI text uses this face).
 */
:root {
	/* Confirmed brand-book palette (source of truth) — proportion guide
	   45 / 20 / 25 / 7 / 3, in this same order. */
	--bcc-chicha: #48396F;   /* Maïs mauve — primary, 45% */
	--bcc-choclo: #EEDB76;   /* Maïs géant — secondary, 20% */
	--bcc-quinoa: #F6F1E4;   /* La graine — light/background, 25% */
	--bcc-pacifico: #143232; /* La mer — dark accent, 7% */
	--bcc-lucuma: #EBAF82;   /* Le fruit — accent, 3% */
	--bcc-ink-text: #1B1726; /* Confirmed body-text ink from the V6 asset kit's own tokens -- distinct from Pacífico, not part of the 5-color brand palette itself */

	/* design/reference/index.html's own :root has two tokens the brand
	   book's 5-color list doesn't name on its own: a brighter "paper"
	   white for cards/tabs/panels (its --card/--paper, both #FFFDF8) that
	   sits on top of the tan --bg/Quinoa page background, and a darkened
	   Chicha for :hover states (its --chicha-dk). Without --bcc-paper,
	   --bcc-cream below aliased straight to Quinoa -- the exact same
	   color as the page background it sits on -- so every dish card, menu
	   tab, sticky panel and mini-bar rendered flush with the page instead
	   of lifting off it. */
	--bcc-paper: #FFFDF8;
	--bcc-chicha-dk: #382B5A;

	/* Legacy names (PRs 5/7/8/9/11/12 reference these) -> brand-book colors */
	--bcc-purple-900: var(--bcc-chicha); /* deep background, footer */
	--bcc-purple-700: var(--bcc-chicha); /* primary brand */
	--bcc-purple-500: var(--bcc-chicha); /* hover/active — brand book has one confirmed purple, no tint */
	--bcc-gold-400: var(--bcc-choclo);   /* brand yellow background */
	--bcc-gold-600: var(--bcc-lucuma);   /* accents, borders — distinct from the gold-400 fill */
	--bcc-cream: var(--bcc-paper);       /* cards/tabs/panels sitting on the page -- was aliased to Quinoa (see comment above) */
	--bcc-ink: var(--bcc-ink-text);      /* body text on light — real confirmed ink, not Pacífico */

	/* TODO(Fidel): no red/orange or green exists in the brand book's 5-color
	   palette. --bcc-chili and --bcc-lime are functional UI colors (spicy
	   tag, open-now dot), not brand colors — flagging that these are
	   outside the confirmed palette rather than guessing brand intent. */
	--bcc-chili: var(--bcc-lucuma);
	--bcc-lime: var(--bcc-pacifico);

	/* design/BRIEF.md §2's own :root also names these two -- muted body
	   text and hairline rules/dividers. Confirmed 2026-09-20: hero.css's
	   .bcc-how__step p already referenced --bcc-muted since step 2 of the
	   mockup port, but this file never defined it, so that rule was
	   silently falling back to inherited text colour. Defining both here
	   fixes that and unblocks menu.css's step-3 usage. */
	--bcc-muted: #5A5170;
	--bcc-rule: #CFC6B4;
	--bcc-font-display: "Big Shoulders Display", impact, sans-serif; /* TODO: swap to "Brothers" once licensed — never re-set the logo artwork itself in this font */
	--bcc-font-body: "Roboto Condensed", system-ui, sans-serif;
	--bcc-font-mono: "IBM Plex Mono", ui-monospace, monospace; /* labels, prices, addresses, hours, codes (brand book 02.8) */

	/* Sharp, bordered, "poster" language (2026-09-20, matching the
	   reference mockup Fidel picked) -- flat corners everywhere, no
	   blurred shadows. Cards/buttons/chips get a solid 2px border plus a
	   hard offset shadow on hover instead. Kept as tokens rather than 0
	   hardcoded per file so a future direction change is one edit. */
	--bcc-radius-sm: 0;
	--bcc-radius-md: 0;
	--bcc-radius-lg: 0;
	--bcc-radius-pill: 0;
	--bcc-shadow-card: none;
	--bcc-shadow-lift: 0 16px 40px rgb(72 57 111 / .28);
	--bcc-border-width: 2px;
	--bcc-space: clamp(16px, 2.5vw, 32px);

	/* Film grain overlay for coloured sections (design/BRIEF.md §2),
	   ported verbatim from design/reference/index.html's --grain SVG
	   data URI -- a generated noise texture, not a fetched image. */
	--bcc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/**
 * html *and* body both need overflow-x:hidden -- the reference only
 * sets it on body, but live testing (Fidel: "when scrolling it's
 * moving sideways everything", confirmed on an actual iPhone) found
 * body alone doesn't stop horizontal rubber-band panning on iOS
 * Safari, which scrolls the document element, not body. The hero's
 * infinite marquee track (motion.css) is legitimately much wider than
 * the viewport by design -- .bcc-marquee's own overflow:hidden clips
 * it visually, but without this rule the browser still measures the
 * whole *document* as horizontally scrollable because of it.
 */
html {
	overflow-x: hidden;
}

/**
 * Global radius reset (AUDIT_DESIGN_FUNNEL_Comptoir.md A2): the brand's
 * "poster" language is flat corners everywhere (--bcc-radius-*: 0
 * above), but live measurement across every page found pill-shaped
 * buttons, rounded inputs and a rounded logo image -- 12px/16px/9px
 * radii that exist nowhere in this plugin's own CSS (grepped for
 * hardcoded border-radius: only 50% circles, all intentional dots/
 * avatars). They're Hello Elementor's/Elementor's own default button,
 * input and image styling leaking through wherever this plugin doesn't
 * explicitly override it.
 *
 * !important, corrected 2026-09-20: a universal selector has *zero*
 * specificity -- lower than even a bare element selector -- so without
 * !important this reset never actually beat Elementor's own
 * `button`/`img`/`input` rules (re-verified live post-deploy: radius
 * offenders were unchanged). !important makes it win unconditionally,
 * which is why every intentional `border-radius: 50%` circle rule in
 * this plugin (dots, avatars) now also carries !important below --
 * !important always wins over non-!important regardless of
 * specificity, so those circles would otherwise have been flattened
 * by this same reset.
 *
 * A handful of buttons (.bcc-hero__arrow, .bcc-hero__dots button,
 * .bcc-opt) still measured a small 3px radius live even after this --
 * Elementor's kit CSS scopes some of its own button defaults with a
 * higher-specificity compound selector that keeps winning over this
 * bare `*` rule despite !important (specificity is compared before
 * source order, even between two !important declarations). Gave those
 * three their own `border-radius: 0 !important` directly, which does
 * have enough specificity to win.
 */
* {
	border-radius: 0 !important;
}

/**
 * Base page look (design/reference/index.html's own `body` rule, ported
 * verbatim). Nothing set this before, so every front-end page fell back
 * to the theme's default white background and font instead of the
 * brand's warm tan canvas -- the single biggest reason the site read as
 * off-brand next to the mockup. --bcc-cream-filled cards (see above)
 * only read as "lifted paper" against this tan backdrop; without it
 * they had nothing to contrast against.
 *
 * background/color: !important, corrected 2026-09-20 -- this was the
 * single biggest miss of the whole night. Live-measured
 * document.body's own computed backgroundColor as #FFF5C7 (a pale
 * lemon yellow, Elementor's kit default), not --bcc-quinoa, despite
 * this rule -- exactly AUDIT_DESIGN_FUNNEL_Comptoir.md A3's complaint
 * ("page background is a light lemon yellow"). Every #fff5c7
 * "background" reading in this session's own contrast/palette audits
 * was this real bug, not a sandbox/proxy artifact as earlier passes
 * assumed -- it's what any section without its own opaque background
 * (gaps, margins, any section whose own background rule is also
 * losing this same fight) was actually showing through to. Same
 * missing-!important collision as everywhere else tonight, just never
 * caught here because no automated check was written to inspect the
 * page's own base background specifically, only per-element text
 * contrast and known component classes.
 */
body {
	background: var(--bcc-quinoa) !important;
	color: var(--bcc-ink) !important;
	font-family: var(--bcc-font-body);
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/**
 * Apply .grain to any coloured section to lay this noise texture over
 * it (design/BRIEF.md §2). .grain > * lifts real content above the
 * overlay without needing to know that section's own class names.
 */
.grain {
	position: relative;
	isolation: isolate;
}

.grain::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bcc-grain);
	opacity: .13;
	mix-blend-mode: overlay;
	pointer-events: none;
	z-index: 0;
}

.grain > * {
	position: relative;
	z-index: 1;
}

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/big-shoulders-display-400.woff2") format("woff2");
}

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/big-shoulders-display-700.woff2") format("woff2");
}

@font-face {
	font-family: "Big Shoulders Display";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/big-shoulders-display-900.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-400.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/roboto-condensed-700.woff2") format("woff2");
}

@font-face {
	font-family: "Roboto Condensed";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/roboto-condensed-400-italic.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
}