@import url("/static/icons/phosphor-fill.css");

/* mylabel.food – brändi-ikonit. Self-hostattu Phosphor Fill -fontti + 3D-gradienttilaatat. */

@font-face {
  font-family: "Phosphor-Fill";
  src: url("/static/icons/Phosphor-Fill.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.ph-fill {
  font-family: "Phosphor-Fill" !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  speak: never;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3D-gradienttilaatta: skaalautuu ympäröivän font-size:n mukaan (em). */
.itile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  height: 1.55em;
  border-radius: 0.4em;
  color: #fff;
  vertical-align: -0.32em;
  box-shadow: 0 2px 5px rgba(20, 40, 80, 0.20);
  flex: none;
  position: relative;
  overflow: hidden;
}
.itile::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0));
  pointer-events: none;
}
.itile i, .itile .ph-fill { font-size: 0.92em; line-height: 1; position: relative; z-index: 1; }

/* Värilaatat (gradientti ylhäältä alas). */
.itile-blue   { background: linear-gradient(160deg, #4f9bff, #1d63d8); }
.itile-teal   { background: linear-gradient(160deg, #36d9b0, #0f9b78); }
.itile-amber  { background: linear-gradient(160deg, #ffc24d, #e8930f); }
.itile-purple { background: linear-gradient(160deg, #9a8cff, #5b46d6); }
.itile-coral  { background: linear-gradient(160deg, #ff8a6b, #e0512c); }
.itile-green  { background: linear-gradient(160deg, #7ed36a, #3f9a22); }
.itile-pink   { background: linear-gradient(160deg, #ff86b3, #d44d7e); }
.itile-red    { background: linear-gradient(160deg, #ff7a78, #d83633); }
.itile-gray   { background: linear-gradient(160deg, #9aa3b2, #5f6877); }
.itile-cyan   { background: linear-gradient(160deg, #4fd4e8, #1090b0); }

/* Inline-symboli ilman laattaa (tilamerkit: ok/virhe/varoitus). Vain värillinen glyfi. */
.gico { font-size: 1.05em; vertical-align: -0.12em; line-height: 1; }
.gico-green  { color: #2ea043; }
.gico-red    { color: #d83633; }
.gico-amber  { color: #e8930f; }
.gico-blue   { color: #1d63d8; }
.gico-gray   { color: #8a8f98; }