/* =========================================================================
   DuBois tokens, from the V6 "Glass" boards (docs/design/v6).
   Every colour, radius, shadow, glass recipe, space, type size and easing
   the build uses. Area CSS reads these; never hard-code a hex in an area file.
   ====================================================================== */

:root {
	/* ---------- colour ---------- */
	--db-black: #000000;
	--db-ink: #000000;            /* body text */
	--db-ink-2: #2B2C30;          /* black hover */
	--db-ink-3: #141416;          /* solid dark glass fallback */
	--db-muted: #5C5F66;          /* secondary text */
	--db-white: #FFFFFF;
	--db-mist: #F1F2F4;           /* soft surface: cards, fields on white, chips */
	--db-mist-2: #E7E8EB;         /* mist hover */
	--db-mist-3: #E4E5E8;         /* image placeholder */
	--db-green: #00D700;          /* logo green: CTAs, counts, ticks. Sparingly. */
	--db-green-hover: #3DE03D;
	--db-green-ink: #0B7A2B;      /* green text on white */
	--db-green-deep: #0B3D16;     /* text on green tint */
	--db-green-tint: #E5F8E4;     /* pickup note, success notice */
	--db-green-glow: rgba(0, 215, 0, 0.25); /* focus ring halo */
	--db-red: #B42318;            /* errors */
	--db-red-tint: #FDECEA;
	--db-amber-tint: #FFF6E0;

	--db-line: rgba(0, 0, 0, 0.07);       /* header border, dividers */
	--db-line-2: rgba(0, 0, 0, 0.1);      /* option ring, accordion rule */
	--db-ring: rgba(0, 0, 0, 0.08);       /* field ring */
	--db-ring-2: rgba(0, 0, 0, 0.12);     /* chip ring */
	--db-ring-3: rgba(0, 0, 0, 0.2);      /* ghost button ring */
	--db-on-dark: rgba(255, 255, 255, 0.72);
	--db-on-dark-2: rgba(255, 255, 255, 0.5);
	--db-on-dark-line: rgba(255, 255, 255, 0.12);

	/* ---------- glass ---------- */
	--db-glass: rgba(255, 255, 255, 0.62);
	--db-glass-header: rgba(255, 255, 255, 0.74);
	--db-glass-strong: rgba(255, 255, 255, 0.88);
	--db-glass-dark: rgba(20, 20, 22, 0.38);
	--db-glass-blur: blur(24px) saturate(180%);
	--db-glass-blur-strong: blur(30px) saturate(180%);
	--db-glass-blur-dark: blur(24px) saturate(160%);
	--db-glass-edge: rgba(255, 255, 255, 0.7);
	--db-glass-edge-dark: rgba(255, 255, 255, 0.18);
	--db-backdrop: rgba(0, 0, 0, 0.18);

	/* ---------- radius ---------- */
	--db-r-xs: 6px;
	--db-r-sm: 12px;
	--db-r-ibtn: 14px;
	--db-r-field: 16px;
	--db-r-md: 20px;
	--db-r-lg: 24px;
	--db-r-xl: 28px;   /* media, sheets, footer */
	--db-r-2xl: 32px;  /* big black panels */
	--db-r-pill: 999px;

	/* ---------- shadow ---------- */
	--db-sh-header: inset 0 -1px 0 rgba(255, 255, 255, 0.7), 0 6px 24px rgba(0, 0, 0, 0.04);
	--db-sh-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 32px rgba(0, 0, 0, 0.08);
	--db-sh-dock: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.14);
	--db-sh-sheet: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 64px rgba(0, 0, 0, 0.18);
	--db-sh-float: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 24px 64px rgba(0, 0, 0, 0.3);
	--db-sh-soft: 0 6px 14px -8px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);

	/* ---------- type ---------- */
	--db-font: "Mona Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--db-stretch-head: 108%;
	--db-stretch-wide: 125%;
	--db-fs-h1: clamp(34px, 3.4vw + 21px, 60px);  /* ~34 on phones, 60 max */
	--db-fs-h2: clamp(26px, 1.9vw + 19px, 42px);
	--db-fs-h3: clamp(17px, 0.45vw + 15px, 20px);
	--db-fs-display: clamp(28px, 2.6vw + 14px, 48px); /* footer tagline, big statements */
	--db-fs-lead: 17px;
	--db-fs-body: 16px;
	--db-fs-sm: 15px;
	--db-fs-xs: 14px;
	--db-fs-2xs: 13px;
	--db-fs-3xs: 12px;
	--db-lh-tight: 1.05;
	--db-lh-head: 1.12;
	--db-lh-body: 1.6;
	--db-ls-h1: -0.035em;
	--db-ls-h2: -0.03em;
	--db-ls-h3: -0.015em;
	--db-w-head: 650;

	/* ---------- space ---------- */
	--db-s-1: 4px;
	--db-s-2: 8px;
	--db-s-3: 12px;
	--db-s-4: 16px;
	--db-s-5: 20px;
	--db-s-6: 24px;
	--db-s-7: 28px;
	--db-s-8: 32px;
	--db-s-10: 40px;
	--db-s-12: 48px;
	--db-s-16: 64px;
	--db-s-18: 72px;
	--db-s-24: 96px;
	--db-s-30: 120px;
	--db-section: clamp(72px, 7vw + 30px, 120px); /* section padding: 72 phones, 120 desktop */
	--db-gutter: 32px;            /* .db-wrap side padding (16px on phones) */
	--db-maxw: 1320px;
	--db-maxw-text: 760px;        /* long reads */
	--db-maxw-embed: 1100px;      /* pages built from plugin forms */

	/* ---------- layout ---------- */
	--db-head-h: 66px;            /* header bar (58px compact) */
	--db-announce-h: 0px;         /* 36px when the announcement shows */
	--db-head-space: calc(var(--db-head-h) + var(--db-announce-h));
	--db-dock-space: 0px;         /* room under the page for the phone dock */
	--db-safe-b: env(safe-area-inset-bottom, 0px);
	--db-tap: 44px;               /* minimum touch target */

	/* ---------- motion ---------- */
	--db-ease: cubic-bezier(0.2, 0.9, 0.2, 1);        /* sheets, reveals */
	--db-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);    /* images, hovers */
	--db-ease-spring: cubic-bezier(0.3, 1.5, 0.5, 1); /* button press */
	--db-ease-bump: cubic-bezier(0.3, 1.6, 0.5, 1);   /* count bump */
	--db-t-fast: 0.2s;
	--db-t-ui: 0.3s;
	--db-t-sheet: 0.6s;
	--db-t-reveal: 0.9s;

	/* ---------- layers ---------- */
	--db-z-header: 60;
	--db-z-dock: 60;
	--db-z-progress: 1100;
	--db-z-sheet: 1000;
	--db-z-toast: 1200;
}

/* Compact header below 1100px (the live menu items need the room). */
@media (max-width: 1099px) {
	:root { --db-head-h: 58px; }
}

/* Phones: dock, tighter gutters. */
@media (max-width: 760px) {
	:root { --db-dock-space: calc(96px + var(--db-safe-b)); }
}
@media (max-width: 640px) {
	:root {
		--db-gutter: 16px;
		--db-fs-lead: 15px;
	}
}

/* Re-declared on body: a custom property that uses var() resolves where it
   is declared, so --db-head-space must be recomputed where the bar's height changes. */
.db-has-announce {
	--db-announce-h: 36px;
	--db-head-space: calc(var(--db-head-h) + var(--db-announce-h));
}
.db-mode-checkout { --db-dock-space: 0px; }