/*
 * Cannabis.Restaurant — design tokens
 * Extracted from the mockups. Change here to retheme the whole site.
 */

:root {
	/* Palette */
	--cr-bg:              #f6f1e7;   /* page background */
	--cr-surface:         #fffdf8;   /* cards, elevated panels */
	--cr-surface-alt:     #f6f1e7;   /* card on card */
	--cr-ink:             #26231d;   /* primary text */
	--cr-ink-2:           #4c473e;   /* nav / body strong */
	--cr-ink-3:           #5a544a;   /* body copy */
	--cr-muted:           #6f6a61;   /* muted body */
	--cr-mute-2:          #8a857c;   /* labels, captions */
	--cr-mute-3:          #a99e86;   /* subtlest labels */
	--cr-border:          #e4dccb;   /* hairline dividers */
	--cr-border-strong:   #cfc6b4;   /* outlined buttons, filter chips inactive */
	--cr-input-border:    #d9cfbb;   /* inputs */
	--cr-divider-soft:    #eee4d3;   /* very soft divider inside cards */

	--cr-accent:          #b7532f;   /* terracotta primary accent */
	--cr-accent-ink:      #ffffff;   /* text on accent */
	--cr-accent-soft:     #f6ddd1;   /* accent tint */
	--cr-accent-highlight:#e6b79f;   /* accent tint on dark bg */

	--cr-tag-bg:          #eaf1e8;   /* green pill background */
	--cr-tag-ink:         #3f6b3f;   /* green pill text */

	--cr-dark:            #26231d;   /* dark band */
	--cr-dark-ink:        #f6f1e7;   /* text on dark band */
	--cr-dark-ink-2:      #c9c2b3;   /* muted text on dark band */

	/* Type */
	--cr-serif:  'Playfair Display', Georgia, serif;
	--cr-sans:   'Work Sans', system-ui, -apple-system, sans-serif;
	--cr-mono:   'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	/* Radii */
	--cr-r-sm:  9px;
	--cr-r-md:  12px;
	--cr-r-lg:  14px;
	--cr-r-xl:  16px;
	--cr-pill:  100px;

	/* Container widths */
	--cr-container:       1180px;    /* home */
	--cr-container-inner: 1120px;    /* article-style pages */
	--cr-pad-x:           56px;      /* horizontal page padding */

	/* Type sizes */
	--cr-h1:  82px;
	--cr-h2:  42px;
	--cr-h3:  30px;
	--cr-h4:  22px;

	/* Effects */
	--cr-nav-bg-blur: rgba(246, 241, 231, 0.92);
}

/* Mobile scale-down */
@media (max-width: 900px) {
	:root {
		--cr-pad-x: 24px;
		--cr-h1: 44px;
		--cr-h2: 30px;
		--cr-h3: 24px;
	}
}