@import url("../css/palette.css?v=3");

/* Generated color samples; four approved shades per base color. */
.design-color-black { background:var(--palette-black); }
.design-color-navy { background:var(--palette-navy); }
.design-color-white { background:var(--palette-white); }
.design-color-blue { background:var(--palette-blue); }
.design-color-sky { background:var(--palette-sky); }
.design-color-green { background:var(--palette-green); }
.design-color-amber { background:var(--palette-amber); }
.design-color-red { background:var(--palette-red); }
.design-color-black-0-1 { background:rgba(var(--palette-black-rgb), 0.1); }
.design-color-black-0-25 { background:rgba(var(--palette-black-rgb), 0.25); }
.design-color-black-0-5 { background:rgba(var(--palette-black-rgb), 0.5); }
.design-color-black-0-8 { background:rgba(var(--palette-black-rgb), 0.8); }
.design-color-navy-0-1 { background:rgba(var(--palette-navy-rgb), 0.1); }
.design-color-navy-0-25 { background:rgba(var(--palette-navy-rgb), 0.25); }
.design-color-navy-0-5 { background:rgba(var(--palette-navy-rgb), 0.5); }
.design-color-navy-0-8 { background:rgba(var(--palette-navy-rgb), 0.8); }
.design-color-white-0-1 { background:rgba(var(--palette-white-rgb), 0.1); }
.design-color-white-0-25 { background:rgba(var(--palette-white-rgb), 0.25); }
.design-color-white-0-5 { background:rgba(var(--palette-white-rgb), 0.5); }
.design-color-white-0-8 { background:rgba(var(--palette-white-rgb), 0.8); }
.design-color-blue-0-1 { background:rgba(var(--palette-blue-rgb), 0.1); }
.design-color-blue-0-25 { background:rgba(var(--palette-blue-rgb), 0.25); }
.design-color-blue-0-5 { background:rgba(var(--palette-blue-rgb), 0.5); }
.design-color-blue-0-8 { background:rgba(var(--palette-blue-rgb), 0.8); }
.design-color-sky-0-1 { background:rgba(var(--palette-sky-rgb), 0.1); }
.design-color-sky-0-25 { background:rgba(var(--palette-sky-rgb), 0.25); }
.design-color-sky-0-5 { background:rgba(var(--palette-sky-rgb), 0.5); }
.design-color-sky-0-8 { background:rgba(var(--palette-sky-rgb), 0.8); }
.design-color-green-0-1 { background:rgba(var(--palette-green-rgb), 0.1); }
.design-color-green-0-25 { background:rgba(var(--palette-green-rgb), 0.25); }
.design-color-green-0-5 { background:rgba(var(--palette-green-rgb), 0.5); }
.design-color-green-0-8 { background:rgba(var(--palette-green-rgb), 0.8); }
.design-color-amber-0-1 { background:rgba(var(--palette-amber-rgb), 0.1); }
.design-color-amber-0-25 { background:rgba(var(--palette-amber-rgb), 0.25); }
.design-color-amber-0-5 { background:rgba(var(--palette-amber-rgb), 0.5); }
.design-color-amber-0-8 { background:rgba(var(--palette-amber-rgb), 0.8); }
.design-color-red-0-1 { background:rgba(var(--palette-red-rgb), 0.1); }
.design-color-red-0-25 { background:rgba(var(--palette-red-rgb), 0.25); }
.design-color-red-0-5 { background:rgba(var(--palette-red-rgb), 0.5); }
.design-color-red-0-8 { background:rgba(var(--palette-red-rgb), 0.8); }

.design-color-list { list-style:none; padding:0; margin:12px 0 18px; }
.design-color-list li { display:grid; grid-template-columns:20px 104px minmax(0,1fr); align-items:center; gap:8px; padding:8px 0; border-bottom:1px solid rgba(var(--palette-white-rgb),0.25); font-size:12px; line-height:1.4; }
.design-color-list li > span { min-width:0; overflow-wrap:anywhere; }
.design-color-list small { color:rgba(var(--palette-white-rgb),0.8); font-size:10px; }
.design-color-list li > span:last-child { color:rgba(var(--palette-white-rgb),0.8); }
.design-color-swatch { display:block; box-sizing:border-box; width:20px; height:20px; border:1px solid rgba(var(--palette-white-rgb),0.5); border-radius:4px; }