/* ==========================================================================
   WalkTheDock — Color-named Pill Utilities
   --------------------------------------------------------------------------
   Foundation-tier utility shipped via the route-tools plugin so it's
   available on prod ahead of the full voxel-child theme deploy. Once the
   foundation `voxel-child/style.css` is in place site-wide, this file can
   be removed and its rules will be replaced by the foundation copy.
   ========================================================================== */

:root {
	/* Tints used by .wtd-pill--{color} utilities (~14–16% alpha treatment) */
	--wtd-tint-bouy:        rgba(242, 100,  25, 0.14);
	--wtd-tint-deep-ocean:  rgba( 10,  77, 140, 0.12);
	--wtd-tint-wave:        rgba( 42, 166, 160, 0.16);
	--wtd-tint-sky:         rgba(136, 207, 239, 0.30);
	--wtd-tint-seafoam:     rgba(162, 213, 198, 0.32);
	--wtd-tint-charcoal:    rgba( 13,  13,  13, 0.08);
	--wtd-tint-amber:       rgba(234, 179,   8, 0.18);

	/* Darker text companions for AA contrast on the tinted background */
	--wtd-color-bouy-dark:       #C04B2C;
	--wtd-color-deep-ocean-dark: #0A4D8C;
	--wtd-color-wave-dark:       #157A75;
	--wtd-color-sky-dark:        #1F6A92;
	--wtd-color-seafoam-dark:    #3E7A66;
	--wtd-color-charcoal-dark:   #0D0D0D;
	--wtd-color-amber-dark:      #92590B;

	/* Solid-fill base colors */
	--wtd-color-bouy-solid:       #F26419;
	--wtd-color-deep-ocean-solid: #0A4D8C;
	--wtd-color-wave-solid:       #2AA6A0;
	--wtd-color-sky-solid:        #88CFEF;
	--wtd-color-seafoam-solid:    #A2D5C6;
	--wtd-color-charcoal-solid:   #0D0D0D;
	--wtd-color-amber-solid:      #EAB308;
}

/* Shared shape + typography */
.wtd-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-family: 'Roboto', var(--e-global-typography-text-font-family, system-ui), sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1.4;
}

/* Tinted variants (default presentation) */
.wtd-pill--bouy        { background: var(--wtd-tint-bouy);       color: var(--wtd-color-bouy-dark); }
.wtd-pill--deep-ocean  { background: var(--wtd-tint-deep-ocean); color: var(--wtd-color-deep-ocean-dark); }
.wtd-pill--wave        { background: var(--wtd-tint-wave);       color: var(--wtd-color-wave-dark); }
.wtd-pill--sky         { background: var(--wtd-tint-sky);        color: var(--wtd-color-sky-dark); }
.wtd-pill--seafoam     { background: var(--wtd-tint-seafoam);    color: var(--wtd-color-seafoam-dark); }
.wtd-pill--charcoal    { background: var(--wtd-tint-charcoal);   color: var(--wtd-color-charcoal-dark); }
.wtd-pill--amber       { background: var(--wtd-tint-amber);      color: var(--wtd-color-amber-dark); }

/* Solid-fill modifier — pair with a color variant */
.wtd-pill--solid.wtd-pill--bouy        { background: var(--wtd-color-bouy-solid);       color: #fff; }
.wtd-pill--solid.wtd-pill--deep-ocean  { background: var(--wtd-color-deep-ocean-solid); color: #fff; }
.wtd-pill--solid.wtd-pill--wave        { background: var(--wtd-color-wave-solid);       color: #fff; }
.wtd-pill--solid.wtd-pill--sky         { background: var(--wtd-color-sky-solid);        color: #0D2A3E; }
.wtd-pill--solid.wtd-pill--seafoam     { background: var(--wtd-color-seafoam-solid);    color: #1F3F33; }
.wtd-pill--solid.wtd-pill--charcoal    { background: var(--wtd-color-charcoal-solid);   color: #fff; }
.wtd-pill--solid.wtd-pill--amber       { background: var(--wtd-color-amber-solid);      color: #fff; }