/* Bolster design tokens.
 * Mirrors https://bolster.ortecapps.com/home as closely as we can with
 * vanilla CSS: typography, color palette, rounding scale, focus ring,
 * elevation. Component-level rules (cards, chips, buttons, forms, tables)
 * live in the page-specific stylesheets (retailer-gateway.css /
 * wismo-admin.css) but consume only the tokens defined here.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

* { box-sizing: border-box; }
body { margin: 0; }

:root {
	color-scheme: light dark;

	/* ---- rounding scale (matches --bol-rounding-*) ---------- */
	--bol-rounding-none:   0;
	--bol-rounding-small:  4px;
	--bol-rounding-medium: 8px;
	--bol-rounding-large:  16px;
	--bol-rounding-full:   999px;

	/* ---- light theme colors (matches Bolster light) --------- */
	--bol-color-primary:           hsl(202, 100%, 35%);
	--bol-color-primary-lighter:   hsl(202, 100%, 87%);
	--bol-color-accent:            hsl(319, 100%, 33%);
	--bol-color-accent-lighter:    hsl(319, 81%, 92%);
	--bol-color-positive:          hsl(145, 100%, 25%);
	--bol-color-negative:          hsl(0,   100%, 43%);
	--bol-color-negative-lighter:  hsl(0,   100%, 92%);
	--bol-color-warning:           hsl(33,  100%, 47%);

	--bol-color-blue:              hsl(202, 100%, 35%);
	--bol-color-green:             hsl(70,  87%,  24%);
	--bol-color-orange:            hsl(15,  83%,  40%);
	--bol-color-purple:            hsl(319, 100%, 33%);

	--bol-color-text-primary:      hsl(0,   0%,   25%);
	--bol-color-text-secondary:    hsl(0,   0%,   41%);
	--bol-color-text-contrast:     hsl(0,   0%,   100%);
	--bol-color-text-disabled:     hsla(0,  0%,   25%, .6);

	--bol-color-background-primary:    hsl(220, 27%, 98%);
	--bol-color-background-secondary:  hsl(0,   0%,  100%);
	--bol-color-background-tertiary:   hsl(220, 30%, 96%);

	--bol-color-border:            hsla(220, 65%, 35%, .2);
	--bol-color-hover:             hsl(203, 53%, 93%);
	--bol-color-focus:             hsl(213, 100%, 20%);

	/* ---- elevation (Material-style, Bolster uses these) ---- */
	--bol-elevation-1: 0 3px 1px -2px rgba(0,0,0,.20), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12);
	--bol-elevation-2: 0 2px 4px -1px rgba(0,0,0,.20), 0 4px 5px rgba(0,0,0,.14), 0 1px 10px rgba(0,0,0,.12);
	--bol-elevation-3: 0 3px 5px -1px rgba(0,0,0,.20), 0 6px 10px rgba(0,0,0,.14), 0 1px 18px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bol-color-primary:           hsl(202, 100%, 53%);
		--bol-color-primary-lighter:   hsl(202, 54%,  24%);
		--bol-color-accent:            hsl(319, 80%,  70%);
		--bol-color-accent-lighter:    hsl(319, 23%,  29%);
		--bol-color-positive:          hsl(145, 100%, 38%);
		--bol-color-negative:          hsl(0,   100%, 70%);
		--bol-color-negative-lighter:  hsl(0,   29%,  29%);
		--bol-color-warning:           hsl(28,  100%, 69%);

		--bol-color-blue:              hsl(202, 100%, 53%);
		--bol-color-green:             hsl(70,  87%,  36%);
		--bol-color-orange:            hsl(26,  86%,  53%);
		--bol-color-purple:            hsl(319, 80%,  70%);

		--bol-color-text-primary:      hsl(0,   0%,   94%);
		--bol-color-text-secondary:    hsl(0,   0%,   72%);
		--bol-color-text-contrast:     hsl(0,   0%,   7%);
		--bol-color-text-disabled:     hsla(0,  0%,  100%, .4);

		--bol-color-background-primary:    hsl(220, 21%, 8%);
		--bol-color-background-secondary:  hsl(220, 21%, 12%);
		--bol-color-background-tertiary:   hsl(220, 21%, 16%);

		--bol-color-border:            hsla(0,   0%, 100%, .2);
		--bol-color-hover:             hsl(202, 38%, 19%);
		--bol-color-focus:             hsl(203, 53%, 93%);
	}
}

/* ---- typography (matches .bol-body / .bol-title / .bol-label) -- */

body {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.25px;
	background-color: var(--bol-color-background-primary);
	color: var(--bol-color-text-primary);
}

h1, .bol-headline {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 34px;
	font-weight: 300;
	line-height: 40px;
	letter-spacing: normal;
	margin: 0 0 16px;
}

h2 {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: normal;
	margin: 0 0 12px;
}

h3, .bol-title {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: normal;
	margin: 0 0 8px;
}

.bol-label {
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.4px;
}

a:link    { color: var(--bol-color-primary); }
a:visited { color: var(--bol-color-accent); }

/* ---- focus ring (Bolster spec: 0 0 1px 3px var(--bol-color-focus)) --- */

*:focus-visible {
	outline: none;
	box-shadow: 0 0 1px 3px var(--bol-color-focus);
}