/*
 * BuyBack design tokens
 * Source: Figma "BuyBack UX/UI" (o0QdikGsRlDM5vPh3CNc88), local variables + styles.
 * Only defines custom properties. No selectors other than :root, so loading
 * this file changes nothing visually on its own.
 */

:root {
	/* ---------- Primitives ---------- */
	--bb-neutral-white: #ffffff;
	--bb-neutral-25: #f9fafb;
	--bb-neutral-50: #f7f8f9;
	--bb-neutral-100: #f1f3f5;
	--bb-neutral-200: #e3e7ea;
	--bb-neutral-500: #66717c;
	--bb-neutral-700: #36414b;
	--bb-neutral-900: #1e2327;

	--bb-brand-50: #f0faf5;
	--bb-brand-100: #ddf4e7;
	--bb-brand-200: #b8e3ca;
	--bb-brand-300: #83cea5;
	--bb-brand-500: #2aa666;
	--bb-brand-700: #029046;
	--bb-brand-800: #028543;
	--bb-brand-900: #01713a;

	--bb-success-600: #187a45;
	--bb-danger-600: #c43d3d;
	--bb-warning-600: #a76500;
	--bb-focus-600: #029046;

	/* ---------- Semantic ---------- */
	--bb-color-bg-page: var(--bb-neutral-25);
	--bb-color-bg-canvas: var(--bb-neutral-white);
	--bb-color-bg-subtle: var(--bb-neutral-50);
	--bb-color-bg-muted: var(--bb-neutral-100);
	--bb-color-bg-inverse: var(--bb-neutral-900);
	--bb-color-bg-brand: var(--bb-brand-800);
	--bb-color-bg-support-subtle: var(--bb-brand-50);
	--bb-color-bg-support-muted: var(--bb-brand-100);

	--bb-color-text-primary: var(--bb-neutral-900);
	--bb-color-text-secondary: var(--bb-neutral-500);
	--bb-color-text-inverse: var(--bb-neutral-white);
	--bb-color-text-link: var(--bb-brand-800);
	--bb-color-text-support: var(--bb-brand-800);

	--bb-color-border-default: var(--bb-neutral-200);
	--bb-color-border-strong: var(--bb-neutral-500);
	--bb-color-border-support: var(--bb-brand-700);

	--bb-color-icon-support: var(--bb-brand-700);

	--bb-color-action-primary: var(--bb-brand-800);
	--bb-color-action-primary-hover: var(--bb-brand-900);

	--bb-color-status-success: var(--bb-success-600);
	--bb-color-status-danger: var(--bb-danger-600);
	--bb-color-status-warning: var(--bb-warning-600);
	--bb-color-status-error: #b42318;

	--bb-color-focus-ring: var(--bb-brand-700);

	/* ---------- Spacing ---------- */
	--bb-space-2xs: 2px;
	--bb-space-xs: 4px;
	--bb-space-sm: 8px;
	--bb-space-md: 12px;
	--bb-space-lg: 16px;
	--bb-space-xl: 24px;
	--bb-space-2xl: 32px;
	--bb-space-3xl: 48px;
	--bb-space-4xl: 64px;

	/* ---------- Radius ---------- */
	--bb-radius-sm: 4px;
	--bb-radius-md: 8px;
	--bb-radius-lg: 12px;
	--bb-radius-xl: 16px;
	--bb-radius-full: 999px;

	/* ---------- Sizing ---------- */
	--bb-size-control-min: 44px;

	/* ---------- Layout (Mobile default, overridden below) ---------- */
	--bb-layout-content-max: 358px;
	--bb-layout-gutter: 16px;

	/* ---------- Typography ---------- */
	--bb-font-family: "Lato", Arial, sans-serif;
	--bb-font-weight-regular: 400;
	--bb-font-weight-bold: 700;

	--bb-h1-size: 51px;
	--bb-h1-line: 55px;
	--bb-h1-tracking: 0;
	--bb-h2-size: 36px;
	--bb-h2-line: 43px;
	--bb-h2-tracking: -0.2px;
	--bb-h3-size: 28px;
	--bb-h3-line: 34px;
	--bb-h3-tracking: -0.1px;
	--bb-h4-size: 22px;
	--bb-h4-line: 28px;
	--bb-h4-tracking: 0;

	--bb-body-lg-size: 18px;
	--bb-body-lg-line: 28px;
	--bb-body-md-size: 16px;
	--bb-body-md-line: 24px;
	--bb-body-sm-size: 14px;
	--bb-body-sm-line: 20px;

	--bb-label-md-size: 14px;
	--bb-label-md-line: 20px;
	--bb-label-md-tracking: 0.1px;

	--bb-price-lg-size: 36px;
	--bb-price-lg-line: 40px;
	--bb-price-lg-tracking: -0.4px;

	/* ---------- Effects ---------- */
	--bb-shadow-card: 0 4px 16px rgba(31, 36, 41, 0.10);
	--bb-shadow-floating: 0 8px 24px rgba(31, 36, 41, 0.12), 0 2px 6px rgba(31, 36, 41, 0.06);
	--bb-shadow-bottom-nav: 0 -6px 22px rgba(13, 18, 23, 0.16);
	--bb-glass-blur: 28px;
	--bb-shadow-glass: inset 0 1px 2px rgba(255, 255, 255, 0.52), 0 8px 24px rgba(13, 18, 23, 0.16);
}

/* Tablet: Figma "Responsive" collection, mode Tablet */
@media only screen and (min-width: 48em) {
	:root {
		--bb-layout-content-max: 704px;
		--bb-layout-gutter: 32px;
	}
}

/* Desktop: Figma "Responsive" collection, mode Desktop.
   850px = Flatsome "large" breakpoint, so tokens switch with the theme grid. */
@media only screen and (min-width: 850px) {
	:root {
		--bb-layout-content-max: 1200px;
		--bb-layout-gutter: 64px;
	}
}

/* Wide desktop (Tiago, 2026-10): from 1440px some templates grow to 1600px (css/layout-wide.css).
   --gf-bb-layout-max is the name Tiago's code reads (catalogue, cart); it aliases the token. */
@media only screen and (min-width: 1440px) {
	:root {
		--bb-layout-wide-max: 1600px;
		--gf-bb-layout-max: var(--bb-layout-wide-max);
	}
}