:root{
  --ink:#17130d;
  --ink-soft:#3a352c;
  --ink-hover:#2b2620;
  --black:#000000;

  --cream:#f6f1e9;
  --cream-deep:#ede4d6;
  --cream-line:#e4dccd;
  --white:#ffffff;

  --pastel-peach:#f7b98c;
  --pastel-yellow:#f6cf5b;
  --pastel-pink:#f4a8c0;
  --pastel-purple:#c3a7ea;
  --pastel-blue:#9cc6e8;
  --pastel-mint:#a8d8c2;

  --gray-50:#f7f5f1;
  --gray-100:#efece6;
  --gray-200:#e2ddd3;
  --gray-300:#cfc8bb;
  --gray-400:#a8a094;
  --gray-500:#7d766a;
  --gray-600:#5c5648;
  --gray-700:#403b31;
  --gray-800:#2a261f;
  --gray-900:#17130d;

  --success-500:#2e9e5b;
  --success-600:#1f7a45;
  --success-50:#e7f6ee;
  --warning-500:#d99414;
  --warning-50:#fbf1dd;
  --danger-500:#d92d20;
  --danger-50:#fdeceb;
  --info-500:#3a7ca5;

  --bkash-pink:#e2136e;
  --nagad-orange:#ec1c24;
  --rocket-purple:#8c3494;

  --blue-500:#1565c0;
  --blue-900:#0e2942;
  --orange-500:#f93c00;
  --orange-600:#d63400;

  --color-primary:var(--ink);
  --color-primary-hover:var(--ink-hover);
  --color-primary-dark:var(--black);
  --color-accent:var(--ink);
  --color-accent-hover:var(--ink-hover);

  --text-strong:var(--ink);
  --text-body:#4a453c;
  --text-muted:#736c60;
  --text-on-dark:#ffffff;
  --text-on-dark-muted:rgba(255,255,255,.72);
  --text-on-accent:#ffffff;
  --text-link:var(--ink);
  --text-link-hover:var(--ink-soft);

  --surface-page:var(--white);
  --surface-subtle:var(--cream);
  --surface-muted:var(--cream-deep);
  --surface-card:var(--white);
  --surface-dark:var(--black);
  --surface-brand:var(--ink);

  --border-subtle:var(--cream-line);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-focus:var(--ink);

  --font-sans:'Hanken Grotesk','Hind Siliguri','Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Hanken Grotesk','Hind Siliguri','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-bangla:'Hind Siliguri','Hanken Grotesk',system-ui,sans-serif;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fw-black:900;

  --fs-display:clamp(2.25rem,1.35rem + 3vw,3.75rem);
  --fs-h1:clamp(2rem,1.2rem + 2.4vw,3.25rem);
  --fs-h2:clamp(1.9rem,1.3rem + 2.2vw,2.75rem);
  --fs-h3:1.5rem;
  --fs-h4:1.25rem;
  --fs-lg:1.125rem;
  --fs-body:1rem;
  --fs-sm:0.875rem;
  --fs-xs:0.75rem;

  --lh-tight:1.1;
  --lh-snug:1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.65;

  --ls-tight:-0.03em;
  --ls-normal:0;
  --ls-wide:0.04em;
  --ls-caps:0.08em;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;
  --space-20:80px;
  --space-24:96px;

  --radius-xs:8px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:18px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-button:999px;

  --shadow-xs:0 1px 2px rgba(23,19,13,.05);
  --shadow-sm:0 1px 3px rgba(23,19,13,.07),0 1px 2px rgba(23,19,13,.05);
  --shadow-md:0 6px 18px rgba(23,19,13,.08);
  --shadow-lg:0 18px 40px rgba(23,19,13,.12);
  --shadow-hover:0 20px 46px rgba(23,19,13,.16);
  --shadow-accent:0 8px 20px rgba(23,19,13,.14);

  --container-max:1200px;
  --container-pad:clamp(16px,4vw,40px);
  --header-h:72px;

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:.15s;
  --dur:.25s;
  --dur-slow:.4s;
}

:root {
	--sp-toast-dwell: 2800;
}

.sp-cs-toast,
.sp-ms-toast,
.sp-de__toast {
	position: fixed;
	left: 50%;
	bottom: var(--space-6);
	z-index: 200;
	display: flex;
	align-items: center;
	gap: 9px;
	max-width: min(92vw, 460px);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-pill);
	background: var(--white);
	color: var(--ink);
	box-shadow: var(--shadow-lg);
	font-size: var(--fs-sm);
	font-weight: var(--fw-bold);
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%) translateY(calc(100% + var(--space-6)));
	transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur) var(--ease-out);
}

.sp-cs-toast.is-show,
.sp-cs-toast.is-on,
.sp-ms-toast.is-on,
.sp-de__toast.is-on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.sp-cs-pill,
.sp-ms-pill,
.sp-de-pill,
.sp-de-setup__pill {
	border-radius: var(--radius-pill);
	font-family: inherit;
	font-weight: var(--fw-bold);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.sp-cs-swatch,
.sp-ms-swatch,
.sp-de-swatch {
	border-radius: var(--radius-sm);
	cursor: pointer;
	padding: 0;
}

@media (max-width: 900px) {
	.sp-cs-toast,
	.sp-ms-toast,
	.sp-de__toast {
		bottom: var(--space-3);
	}
}