.tag {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 6px;
    border: 0 solid transparent;
  }
  
  /* Variants */
  .tag.primary {
    background: #312D25;
    color: #FFFFFE;
  }
  
  .tag.secondary {
    background: #F4F2EE;
    color: #0C0800;
  }
  
  .tag.ochre {
    background: #FFF2B0;
    color: #514700;
  }
  
  .tag.petrel {
    background: #E4F3FF;
    color: #004C6A;
  }
  
  .tag.candy {
    background: #FFEBF7;
    color: #73276D;
  }
  
  .tag.coral {
    background: #FFECED;
    color: #91002C;
  }
  
  .tag.scarlet {
    background: #FFEDEB;
    color: #900B13;
  }
  
  .tag.jade {
    background: #E8F7E5;
    color: #204A1B;
  }
  
  .tag.terracotta {
    background: #FFECDD;
    color: #7F3300;
  }
  
  .tag.iris {
    background: #F8EFFF;
    color: #440080;
  }
  
  /* Modifiers */
  .tag.outlined {
    border-width: 1px;
    border-style: solid;
  }
  
  .tag.primary.outlined { border-color: #0C0800; }
  .tag.secondary.outlined { border-color: #E4E2DD; }
  .tag.ochre.outlined { border-color: #6B5F00; }
  .tag.petrel.outlined { border-color: #00658B; }
  .tag.candy.outlined { border-color: #8F4087; }
  .tag.coral.outlined { border-color: #B61D40; }
  .tag.scarlet.outlined { border-color: #B32927; }
  .tag.jade.outlined { border-color: #27601A; }
  .tag.terracotta.outlined { border-color: #A54C14; }
  .tag.iris.outlined { border-color: #4A1780; }
  
  .tag.text {
    background: transparent;
    border-color: transparent;
  }
  
  .tag.primary.text { color: #FFFFFE; }
  .tag.secondary.text { color: #0C0800; }
  .tag.ochre.text { color: #514700; }
  .tag.petrel.text { color: #004C6A; }
  .tag.candy.text { color: #73276D; }
  .tag.coral.text { color: #91002C; }
  .tag.scarlet.text { color: #900B13; }
  .tag.jade.text { color: #204A1B; }
  .tag.terracotta.text { color: #7F3300; }
  .tag.iris.text { color: #440080; }
  
  .tag.rounded {
    border-radius: 12px;
  }

  .tag .material-symbols-outlined {
    font-size: inherit;
  }

  .tag span {
    font-size: inherit;
    line-height: 0;
  }